HTML5中のaudioタグのVueでの使用に注意が必要です。

馬上また学校が始まる😭😭😭。

1. はじめに#

ブログで使用するモバイル向けの音楽プレーヤーを実装している際に、見た目を美しくするために、audioのapiを呼び出して自分たちが望むスタイルを実現する必要があります。それでは、使用する際に注意すべき点は何でしょうか。

2.audio の使用方法#

使用方法を理解するためには、どのように使用されるかを知る必要があります。以下は基本的な使用方法で、2 つの方法があります。

audioタグを直接使用します。ここでは、音楽の再生を動的に切り替えるためにvueを使用しています。
```
<audio    :src="currentMusic.url"
          controls
          @ended="musicEnd"
          ref="myaudio"
          style="display:none;">
    お使いのブラウザはaudioをサポートしていません
</audio>
```
上記のコードは、srcを変更してオーディオを切り替えますが、以下の点に注意してください：
1. この方法でオーディオを切り替える場合、this.$refs.myaudio.load()メソッドを呼び出す必要はありません。自動的にオーディオがロードされます。これは、Vue では特定のプロパティを変更すると、ブラウザが再配置され、オーディオデータが自動的に取得されるためです。
2. 一度に 1 つのオーディオのみが再生されるため、ブラウザの非互換性の問題が発生する可能性があります。
3. this.$refs.myaudio.play()を直接使用すると、オーディオがまだロードされていない状態でこのメソッドを呼び出す可能性がありますが、これは明らかに不合理です。

sourceを使用する方法。

<audio controls>   
    <source id='test' src="http://music.163.com/song/media/outer/url?id=26447698.mp3" type="audio/mpeg">
    <source src="horse.ogg" type="audio/ogg">
	お使いのブラウザはaudioをサポートしていません
</audio>

上記の方法を使用すると、複数のsourceタグを追加することで、さまざまなブラウザの形式の互換性を実現できます。その他の部分は、最初の方法と同様です。

3.play メソッドを呼び出すタイミングについて#

srcを切り替えた後にplayメソッドを直接呼び出す場合、問題が発生する可能性があります。次の曲に切り替えるメソッドの例です：

next(){
      this.currentMusic = this.audio[this.current+1 === this.allMusic?this.current = 0:++this.current]
      this.$refs.myaudio.play()
   }
},

currentMusicは現在の音楽を表し、currentは現在の音楽のインデックス、allMusicは音楽の総数、audioはすべての音楽のリストを表します。次の曲をクリックすると、このメソッドが呼び出されます。Vue を使用しているため、srcを切り替えるたびに、audioが再ロードされますが、クリックが速すぎるか、ネットワークが遅い場合にエラーが発生する可能性があります。

DOMException: The play() request was interrupted by a new load request.

このエラーについては、文字通りの意味で、リソースがまだ準備されていない状態で再生を開始したことを示しています。これは明らかに誤った動作です。では、この問題をどのように解決すればよいでしょうか？すぐに思いつくのは、リソースが準備できたことを知った後にplayメソッドを呼び出すことです。もちろん、ご覧のように、HTML5はこれらのメソッドを提供しています。

4.play メソッドのタイミングを確定する方法#

audioのデータがロードされているかどうかを確認するために、ビデオ / オーディオ（audio/video）のロード中にoncanplayイベントが発生し、ビデオ / オーディオが再生可能であることを通知します。使用方法は以下の通りです：

this.currentMusic = this.audio[this.current - 1 === -1?this.current =this.allMusic - 1:--this.current]
this.$refs.myaudio.oncanplay =()=>{
    this.$refs.myaudio.play();
}

オーディオを切り替えした後、audioはまずオーディオを自動的にロードし、ロードが完了するとoncanplayがトリガーされ、必要な操作が実行されます。

このイベントオブジェクト以外にも、onloadstart、ondurationchange、onloadedmetadata、onloadeddata、onprogress、oncanplaythroughなどがあります。

// onloadstartイベントは、ブラウザが指定されたビデオ/オーディオ（audio/video）を検索し始めたときにトリガーされます。
audio.onloadstart = function (){
    console.log('ビデオ/オーディオの検索を開始しました')
}
// ondurationchangeイベントは、ビデオ/オーディオ（audio/video）の長さが変更されたときにトリガーされます。
// 注意：ビデオ/オーディオ（audio/video）がロードされた後、ビデオ/オーディオ（audio/video）の長さは "NaN" から実際の長さに変更されます。
audio.ondurationchange = function (){
    console.log('ビデオ/オーディオ（audio/video）が変更されました')
}
// onloadedmetadataイベントは、指定されたビデオ/オーディオ（audio/video）のメタデータがロードされた後にトリガーされます。
// 注意：ビデオ/オーディオ（audio/video）のメタデータには、長さ、サイズ（ビデオ）、テキストトラックが含まれます。
audio.onloadedmetadata = function (){
    console.log('ビデオ/オーディオ（audio/video）のメタデータがロードされました')
}
// onloadeddataイベントは、現在のフレームのデータが完全にロードされ、ビデオ/オーディオ（audio/video）の次のフレームを再生するための十分なデータがない場合にトリガーされます。
audio.onloadeddata = function (){
    console.log('現在のフレームのデータはロードされましたが、次のフレームはまだロードされていません')
}
// onprogressイベントは、ブラウザが指定されたビデオ/オーディオ（audio/video）をダウンロードしているときにトリガーされます。
audio.onprogress = function (){
    console.log('ビデオ/オーディオ（audio/video）のダウンロードが開始されました')
}
// oncanplayイベントは、ユーザーがビデオ/オーディオ（audio/video）を再生できるようになったときにトリガーされます。
audio.oncanplay = function (){
    console.log('再生できるようになりました')
}
// oncanplaythroughイベントは、ビデオ/オーディオ（audio/video）が正常に再生され、停止やバッファリングなしで再生できるようになったときにトリガーされます。
audio.oncanplaythrough = function (){
    console.log('ビデオ/オーディオ（audio/video）が完全にロードされました')
}

これらのイベントは、ビデオ / オーディオ（audio/video）の再生中にトリガーされ、onloadstart、ondurationchange、onloadedmetadata、onloadeddata、onprogress、oncanplay``oncanplaythroughの順序で実行されます。

5. 参考リンク#

HTML DOM チュートリアル | ランボー教程 (runoob.com)

Aglorice