html - HTML5 音声停止機能

Question

ナビゲーションの各リンクをクリックすると、小さなオーディオクリップが再生されます

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();
});

何か提案はありますか？

score 439 · Accepted Answer

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

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

これにより、目的の効果が得られるはずです。

score 34 · Accepted Answer

まず、オーディオ要素の ID を設定する必要があります

あなたのjsで：

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

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

ply.src = "";// プレーヤーを停止するには、ソースを何も置換する必要があります

score 14 · Accepted Answer

stop() メソッドを実行する私の方法は次のとおりです。

コードのどこか:

audioCh1: document.createElement("audio");

そして stop() で:

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

このようにして、追加のリクエストを生成せず、古いリクエストはキャンセルされ、オーディオ要素はクリーンな状態になります (Chrome と FF でテスト済み):>

score 9 · Accepted Answer

この方法は機能します：

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

しかし、オーディオを停止するたびにこの 2 行のコードを記述したくない場合は、次の 2 つの方法のいずれかを実行できます。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;
};

これは、オーディオを処理するスクリプトの前にhtmlに含める「AudioPlus.js」と呼ばれるjavascriptファイルにあります。

次に、オーディオオブジェクトで stop 関数を呼び出すことができます。

audio.stop();

最後に、「canplaythrough」に関する Chrome の問題:

すべてのブラウザーでこれをテストしたわけではありませんが、これは 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();
};

score 5 · Accepted Answer

私自身のJavaScript関数から再生/一時停止を切り替える-ラジオストリームを処理しているので、リスナーがラジオ局と同期しなくなることがないように、バッファーをクリアしたかったのです。

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 では処理されないため、ソースもクリアして再度ロードする必要があります。これが役立つことを願っています。

score 4 · Accepted Answer

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

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

currentTime を手動で設定すると、オーディオ要素で「canplaythrough」イベントを発生させることができます。リンクでは Firefox について言及されていますが、Chrome で currentTime を手動で設定した後にこのイベントが発生しました。したがって、このイベントに動作が関連付けられている場合、オーディオループが発生する可能性があります。

score 2 · Accepted Answer

shamangeorge さんが書きました:

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

これは実際に発生することであり、一時停止もpauseイベントをトリガーするため、この手法は「停止」メソッドとして使用するのには適していません。さらに、srcを zaki の提案どおりに設定すると、が有効になっている場合、プレーヤーは現在のページの URL をメディアファイルとしてロードしようとします (そして失敗しますautoplay) 。常に URL として扱われます。プレーヤーオブジェクトを破棄する以外に、「停止」メソッドを提供する良い方法はないようです。そのため、専用の停止ボタンをドロップして、代わりに一時停止ボタンとスキップバックボタンを提供することをお勧めします。停止ボタンは実際には機能を追加しません。 .srcnull

score 1 · Accepted Answer

フォーカスのために互いにサウンドをレイヤー化するために使用できるアプリケーションを作成するために、似たようなものを探していました。私がやったことは - サウンドを選択するときに、Javascriptでオーディオ要素を作成することでした:

                const audio = document.createElement('audio') as HTMLAudioElement;
                audio.src = getSoundURL(clickedTrackId);
                audio.id = `${clickedTrackId}-audio`;
                console.log(audio.id);
                audio.volume = 20/100;
                audio.load();
                audio.play();

次に、子をドキュメントに追加して、オーディオ要素を実際に表示します

document.body.appendChild(audio);

最後に、オーディオの選択を解除すると、オーディオ要素を完全に停止して削除できます。これにより、ストリーミングも停止します。

            const audio = document.getElementById(`${clickedTrackId}-audio`) as HTMLAudioElement;
            audio.pause();
            audio.remove();

score 1 · Accepted Answer

このアプローチは「ブルートフォース」ですが、jQuery の使用が「許可されている」と仮定すると機能します。「プレーヤー」<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
}

score 0 · Accepted Answer

オーディオが再生中かどうかを確認し、currentTime プロパティをリセットするとよいと思います。

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

score 0 · Accepted Answer

IE 11 では、組み合わせたバリアントを使用しました。

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

2 回繰り返すだけで、IE が pause() の後にメディアストリームのロードを続行し、それによってディスクがフラッディングするのを防ぐことができます。

html - HTML5 音声停止機能

16 に答える 16

Related

Reference