web-dev-qa-db-ja.com

HTML5オーディオ停止機能

ナビゲーションの各リンクをクリックして小さなオーディオクリップを再生しています

HTMLコード：

<audio tabindex="0" id="beep-one" controls preload="auto" >
    <source src="audio/Output 1-2.mp3">
    <source src="audio/Output 1-2.ogg">
</audio>

JSコード：

$('#links a').click(function(e) {
    e.preventDefault();
    var beepOne = $("#beep-one")[0];
    beepOne.play();
});

今のところうまくいっています。

問題は、サウンドクリップが既に実行されていて、リンクをクリックしても何も起こらない場合です。

リンクのクリックで既に再生中のサウンドを止めようとしましたが、HTML5のAudio APIにはそれに対する直接的なイベントはありません。

私は次のコードを試してみましたが、それは動作していません

$.each($('audio'), function () {
    $(this).stop();
});

何か提案がありますか？

html5html5-audio
128
Alok Jain

stop()の代わりにあなたが試すことができます：

sound.pause();
sound.currentTime = 0;

これは望ましい効果があるはずです

296
kr1

最初にあなたのオーディオ要素にIDを設定しなければなりません

あなたのjsで：

var ply = document.getElementById('player');

var oldSrc = ply.src; //古いソースを思い出すためだけに

ply.src = ""; //プレイヤーを停止するには、ソースを何も置き換えないでください。

22
zaki

これが私のstop（）メソッドのやり方です：

コードのどこかに

audioCh1: document.createElement("audio");

そしてstop（）で：

this.audioCh1.pause()
this.audioCh1.src = 'data:audio/wav;base64,UklGRiQAAABXQVZFZm10IBAAAAABAAEAVFYAAFRWAAABAAgAZGF0YQAAAAA=';

このようにして追加のリクエストを生成することはなく、古いものはキャンセルされ、私たちのオーディオ要素はクリーンな状態になります（ChromeとFFでテスト済み）：

11
MrHetii

私自身のjavascript機能からPlay/Pauseの切り替えまで - 私はラジオストリームを扱っているので、リスナーがラジオ局と同期しなくなってしまわないようにバッファをクリアすることを望みました。

function playStream() {

        var player = document.getElementById('player');

        (player.paused == true) ? toggle(0) : toggle(1);

}

function toggle(state) {

        var player = document.getElementById('player');
        var link = document.getElementById('radio-link');
        var src = "http://192.81.248.91:8159/;";

        switch(state) {
                case 0:
                        player.src = src;
                        player.load();
                        player.play();
                        link.innerHTML = 'Pause';
                        player_state = 1;
                        break;
                case 1:
                        player.pause();
                        player.currentTime = 0;
                        player.src = '';
                        link.innerHTML = 'Play';
                        player_state = 0;
                        break;
        }
}

実は、currentTimeをクリアしてもChromeではカットされません。ソースをクリアして再度読み込む必要があります。これが役立つことを願っています。

5
James Groves

このメソッドは機能します。

audio.pause();
audio.currentTime = 0;

しかし、オーディオを止めるたびにこの2行のコードを書く必要がないのであれば、2つのうちの1つを行うことができます。私が考える2番目の方がより適切なものであり、なぜ「javascript標準の神々」がこの標準を作らなかったのかわかりません。

最初の方法：関数を作成して音声を渡す

function stopAudio(audio) {
    audio.pause();
    audio.currentTime = 0;
}

//then using it:
stopAudio(audio);

2番目の方法（推奨）：Audioクラスを拡張します。

Audio.prototype.stop = function() {
    this.pause();
    this.currentTime = 0;
};

私は "AudioPlus.js"と名付けたJavaScriptファイルの中にこれを持っています。これは私のHTMLの中でオーディオを扱うスクリプトの前に含めます。

それから、オーディオオブジェクトに対してstop関数を呼び出すことができます。

audio.stop();

「canplaythrough」の最後のクロム問題：

すべてのブラウザでこれをテストしたわけではありませんが、これはChromeで発生した問題です。 「canplaythrough」イベントリスナーがアタッチされているオーディオにcurrentTimeを設定しようとすると、そのイベントが再度トリガーされ、望ましくない結果につながる可能性があります。

それで、あなたが本当にそれが再び引き起こされないことを確かめたいというあなたがイベントリスナを付けたときのすべての場合と同様に、解決策は最初の呼び出しの後にイベントリスナを取り除くことです。このようなもの：

//note using jquery to attach the event. You can use plain javascript as well of course.
$(audio).on("canplaythrough", function() {
    $(this).off("canplaythrough");

    // rest of the code ...
});

ボーナス：

あなたはAudioクラス（あるいはそのことに関してはどんなネイティブJavaScriptクラス）にももっと多くのカスタムメソッドを追加することができることに注意してください。

たとえば、オーディオを再起動する「再起動」メソッドが必要な場合は、次のようになります。

Audio.prototype.restart= function() {
    this.pause();
    this.currentTime = 0;
    this.play();
};
4
Zuks

私は同じ問題を抱えていました。ラジオが停止している場合は、ストリームを停止して、ディスプレイ上のliveに移動します。私が見たすべての解決策はデメリットを持っていました。

  • player.currentTime = 0はストリームをダウンロードし続けます。
  • player.src = ''がerrorイベントを発生させます

私の解決策：

var player = document.getElementById('radio');
player.pause();
player.src = player.src;

そしてHTML

<audio src="http://radio-stream" id="radio" class="hidden" preload="none"></audio>
3
Mikel

このリンクによれば、補足として、そして私は最近、受け入れられた答えで提供された停止方法を使用していたので：

https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Media_events

currentTimeを手動で設定することで、オーディオ要素に 'canplaythrough'イベントを発生させることができます。リンクではFirefoxについて言及していますが、ChromeでcurrentTimeを手動で設定した後にこのイベントが発生しました。そのため、このイベントに振る舞いがあると、オーディオループが発生する可能性があります。

3
shamangeorge

shamangeorgeは書きました：

currentTimeを手動で設定することで、オーディオ要素に 'canplaythrough'イベントを発生させることができます。

これは確かに起こることであり、一時停止するとpauseイベントもトリガーされます。どちらの場合も、この手法は "stop"メソッドとしての使用には適していません。さらに、zakiが提案しているようにsrcを設定すると、プレーヤーは現在のページのURLをメディアファイルとしてロードしようとします（そしてautoplayが有効な場合は失敗します） - srcをnullに設定することはできません。常にURLとして扱われます。プレーヤオブジェクトを破壊するだけでは「停止」メソッドを提供する良い方法はないように思われるので、専用の停止ボタンをドロップし、代わりに一時停止ボタンとスキップバックボタンを提供することをお勧めします。 。

2
Ola Tuvesson

このアプローチは「総当たり」ですが、jQueryを使用することが「許可」されていることを前提として機能します。あなたの "player" <audio></audio>タグをdivで囲みます（ここでは "plHolder"のIDを持ちます）。

<div id="plHolder">
     <audio controls id="player">
     ...
     </audio>
<div>

それでは、このJavaScriptは動作するはずです。

function stopAudio() {
    var savePlayer = $('#plHolder').html(); // Save player code
    $('#player').remove(); // Remove player from DOM
    $('#FlHolder').html(savePlayer); // Restore it
}
1
user3062615

クロムではうまくいかない、

sound.pause();
sound.currentTime = 0;

そのように変えるだけで、

sound.currentTime = 0;
sound.pause();
1
gogog

このエラーを回避する簡単な方法はエラーを捉えることです。

audioElement.play（）はpromiseを返すので、次の.catch（）付きのコードでこの問題を解決できます。

function playSound(sound) {
  sfx.pause();
  sfx.currentTime = 0;
  sfx.src = sound;
  sfx.play().catch(e => e);
}

注意：下位互換性のために、arrow関数を無名関数に置き換えることができます。

0
James Marks

オーディオの再生状態を確認してcurrentTimeプロパティをリセットするとよいでしょう。

if (sound.currentTime !== 0 && (sound.currentTime > 0 && sound.currentTime < sound.duration) {
    sound.currentTime = 0;
}
sound.play();
0
NoviceLearner

私がやりたいのは、Angular 2を使用してコントロールを完全に削除してから、次の曲にオーディオパスがあるときにリロードすることです。

<audio id="audioplayer" *ngIf="song?.audio_path">

それから私がコードでそれをアンロードしたいとき、私はこれをします：

this.song = Object.assign({},this.song,{audio_path: null});

次の曲が割り当てられると、コントロールは最初から完全に再作成されます。

this.song = this.songOnDeck;
0
Helzgate

私にとっては、そのコードはうまくいきました。 （IE10 +）

var Wmp = document.getElementById("MediaPlayer");                
    Wmp.controls.stop();

<object classid="clsid:6BF52A52-394A-11D3-B153-00C04F79FAA6"
    standby="Loading áudio..." style="width: 100%; height: 170px" id="MediaPlayer">...

この助けを願っています。

0
Ricardo G Saraiva