この方法は機能します:
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;
};
これは、「AudioPlus.js」と呼ばれるjavascriptファイルにあり、オーディオを処理するスクリプトの前にhtmlに含めます。
次に、オーディオオブジェクトの停止関数を呼び出すことができます。
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();
};