この記事では<audio>、HTML5オーディオ要素のイベント関連APIの属性、メソッド、および基本的な使用法を紹介 します。
この記事の内容は、HTML5 <video>ビデオ要素にも適用できます。
内容が多く、完全に読むには時間がかかりますが、とても実用的で、最初に読むことができます。
1つは、オーディオ使用の基本的なケースです。
<audio controls>
<source src="audiofile.mp3" type="audio/mpeg">
<source src="audiofile.ogg" type="audio/ogg">
<!-- 如果浏览器不支持，则会呈现下面内容 -->
<p>你的浏览器不支持HTML5音频，你可以<a href="audiofile.mp3">下载</a>这个音频文件。</p>
</audio>上記のアプローチは、<audio>IE8が当時まだ大きな頭であり、主要なブラウザによるさまざまなオーディオ形式のサポートが不均一であったため、初期のHTML5の 一般的なコードです。したがって、<source>複数のオーディオを参照するために要素を使用するだけでした。同時に異なる形式のファイル、type属性mime typeを介してそれらを指定する繰り返しのロード状況を避けます。
しかし、今はそれほど面倒である必要はありません。次のことを直接行うことができます。
<audio src="audiofile.mp3" controls></audio>オーディオファイルには、.ogg、.wav、.mp3の3つの一般的な形式があります。その中で、.oggはSafariブラウザ（現在のバージョン13）でサポートされておらず、IEからEdge16まで、.wavはIE-IE11ではサポートされていません。 ;ただし、.mp3 IE9 +はサポートされています。したがって、気にしない場合は、MP3形式を使用できます。これは1つのファイル形式しかないため、type属性も設定できます。
// zxx：MP4ビデオにはACCでエンコードされたオーディオも含まれているため、MP4ビデオファイルも使用できますが、はるかに大きいため、お勧めしません。
<audio>Element IE9ブラウザーがサポートを開始し、00がほぼ20年経過した後、ダウングレードして低バージョンのブラウザーに適応する必要はありません。したがって、単一の<audio>要素で十分です。
2、オーディオHTML属性
<audio>要素の属性に関する詳細を見てみましょう。
自動再生
<audio src="audiofile.mp3" autoplay></audio>autoplayサウンドが自動的に再生されるかどうかを示すブール属性値です。デフォルトでは、自動的に再生されません。ただし、ブラウザの開発に伴い、このプロパティはますます制限的になっています。まず、モバイル側ではautoplay自動再生が禁止され、PC側も禁止されました。18年でChromeが禁止され、多くの開発者から抗議されました。その後、自動再生が復元されました（全員のバッファ時間）。自動再生はサポートされなくなりました。
その理由は、ウェブページが警告なしに自発的に鳴り、ユーザーを不快にし、エクスペリエンスが良くない可能性があるためです。したがって、ブラウザは通常、特定の状況下でのみ正常な自動再生を許可します。
より詳細な自動再生戦略については、MDNに関するこのドキュメントを参照してください。
ただし、私自身の慣習によると、リソースがミュートされている場合やビデオに音声がない場合に自動再生が実行されることがありますが、発生することがあり、自動再生をトリガーする理由は不明です。
ループ
<audio src="audiofile.mp3" loop></audio>loopこれはブール属性値であり、サウンドがループで再生されるかどうかを示します。loopこの属性は、継続的にループできるbgmバックグラウンドミュージックに適しています。loopプロパティはさまざまなプラットフォームやブラウザで適切に機能するため、自信を持って使用できます。
JS設定オーディオループ再生は次のことができます。
document.querySelector('audio').loop = true;ミュート
信号：
<audio src="audiofile.mp3" muted></audio>mutedこれはブール属性値でもあり、オーディオがミュートされているかどうかを示し、デフォルトではミュートせずに再生されます。mutedプロパティはさまざまなプラットフォームやブラウザで適切に機能するため、自信を持って使用できます。
JSはオーディオミュートを設定できます：
document.querySelector('audio').muted = true;予圧
信号：
<audio src="audiofile.mp3" preload="auto"></audio>preloadオーディオのプリロード戦略、つまり、再生する前にどのオーディオリソースを事前にロードする必要があるかを指定できます。次の3つの属性値がサポートされています：
none：再生ボタンをクリックする前に情報が読み込まれないことを示します。metadata：オーディオメタ情報、つまり、ビデオの長さ、タイプ、および作成者（存在する場合）をダウンロードします。/ li>auto：オーディオ全体をダウンロードしようとしますが、5Gが間もなく登場します。トラフィックはお金の価値がないので、個人的にはもっとお勧めしautoます。エクスペリエンスは向上します。次に、通常、ブラウザ自体がロード戦略を最適化します。すべてのオーディオファイルがロードされるわけではありませんが、再生ボタンがクリックされたときにすぐに再生できるように、一部のみがロードされます。
preloadiOS Safariブラウザではこの属性は禁止されています（デスクトップ端末ではこの問題は発生しません）。実際のオーディオ再生時間を長くする必要がある場合は、開発が困難になります。通常の解決策は、最初のタッチでオーディオをミュートし、同時にオーディオをトリガーしてplay()からすぐにリロードすることpause()です。この時点で、同様のpreloadプリロード動作が発生する可能性があります。
ただし、Safariはpreload将来、モバイル端末での読み込み戦略を変更する可能性があります。トラフィックの価値が将来的に低下するため、この種の独善的な最適化は代わりに束縛になります。
コントロール
信号：
<audio src="audiofile.mp3" controls></audio>controlsこれはブール属性値であり、サウンドがオーディオ再生の一時停止などのコントローラーを表示するかどうかを示します。デフォルトでは表示されません。
controlsプロパティが設定されていない場合、オーディオファイルの再生パネル全体が完全に非表示になります。設定がある場合、UIは次の図のようになります（Chrome PC、ミュートの設定）。
異なるブラウザおよび異なるバージョンのブラウザは、異なるUIを持っています。ユーザー側の製品を開発している場合は、オーディオプレーヤーのUIをカスタマイズして、各ブラウザーで同じように見えるようにする必要があります。githubにアクセスして、オープンソースプロジェクトを見つけることができます。
src
信号：
<audio src="audiofile.mp3"></audio>srcこの属性は、オーディオのファイルアドレスを表します。<audio>要素に使用できます<source>。要素にも使用できます。<audio>要素には1つのオーディオアドレスしか存在できず<source>、異なる形式の複数のオーディオファイルを並行して使用できます。
タイプ
<audio src="audiofile.mp3" type="audio/mpeg"></audio>typeこの属性は、オーディオファイルのmimeタイプを指定するために使用されます。ブラウザはタイプを追加しなくてもオーディオファイルを正しく再生できますが、通常はtype属性を追加することをお勧めします。もちろん、srcオーディオ形式が固定されていない場合は、type代わりに属性を追加しないことをお勧めします。エラーが発生しtypeない方がよいでしょうtype。
3つ目は、JSで呼び出されるオーディオ属性です。
<audio>HTMLが次のようになっていると仮定すると、JavaScriptを介してのみ設定できる要素の属性もいくつかあります。
<audio id="myAudio" src="audiofile.mp3"></audio>その後：
現在の時刻
currentTimeこれは読み取りと書き込みが可能な属性であり、現在の再生時間を設定または取得するために使用されます。単位は秒です。
例えば：
// 获取音频已经播放时长
var playedTime = myAudio.currentTime;オーディオの再生が開始されていない場合、playedTime戻り値はyes0です。
currentTime属性値を設定して、オーディオを再生したい時間に配置できるようにすることもできます。たとえば、5秒から再生を開始してから次のようにします。
// 跳到5秒那里
myAudio.currentTime = 5;ボリューム
volumeこれは読み取りおよび書き込み可能な属性でもあり、オーディオボリュームを設定または取得するために使用されます。範囲は0〜1です。
たとえば、音量を50％に設定してから、次のようにします。
// 设置音量50%
myAudio.volume = 0.5;オーディオファイルがに設定されmutedているtrue場合myAudio.volume、戻り値は0です。
playingRate
playbackRateこれは読み取りおよび書き込み可能な属性であり、現在のメディアファイルの再生速度を設定または取得するために使用されます。値は数値です。次に例を示します。
// 获取音频播放速率
var audioSpeed = audio.playbackRate;
// 设置音频设置播放速率为正常速度的1.5倍
audio.playbackRate = 1.5;レート範囲
ドキュメントによると、Geckoカーネルブラウザのレート範囲は0.25〜5.0であり、この範囲を超えるとミュートされます。
Chromeブラウザーの場合、その場でテストしました。16以下に示すように、レート制限に達することができます。
次に、この属性の互換性は良好であり、IE9 +でサポートされています。
一時停止
paused現在のオーディオが一時停止状態にあるかどうかを示す読み取り専用属性です。
// true或false
console.log(myAudio.paused);再生していないときや再生を一時停止してtrueいるときは戻ります。
4つ目は、再生や一時停止などのJSメソッドです。
演奏する（）
オーディオ再生表示、追加パラメーターなし：
myAudio.play();現在、デスクトップであろうとモバイルであろうと、最近のブラウザでは、実行がmyAudio.play()常に効果的であるとは限らないことに注意してください。
現在の戦略では、少なくとも別の信頼できるユーザーの動作の後にWebページをmyAudio.play()再生して実行する必要があります。そうしないと、エラーが報告されます。
信頼できるユーザーの行動には、touchstartタッチまたはclickクリックが含まれます。
2020-11-20の更新
Chromeブラウザバージョン50以降、<video>またはメソッドの<audio>実行後、 play()Promiseが返されます。
play()メソッドは非同期プロセスです。play()メソッドが最初に実行されてからすぐに実行されると、pause()エラーが報告されます。
Uncaught（in promise）DOMException：play（）リクエストがpause（）の呼び出しによって中断されました。
タイマーを追加しても（時間が足りない場合）、このエラーが報告されます。この場合、次の構文を使用できます。
<script>
// 播放开始，可能会显示loading
var playPromise = audio.play();
if (playPromise !== undefined) {
playPromise.then(_ => {
// 这里就已经开始播放了
// 播放UI会出现（如果控件显示的话）
// 此时可以安全的暂停音视频了
audio.pause();
}).catch(error => {
// 无法自动播放
// 显示暂停的UI
});
}
</script>一時停止（）
オーディオ一時停止信号、追加パラメータなし：
myAudio.pause();オーディオ要素にはstop()メソッドがありません。オーディオstop()効果を実現する場合は、最初にcurrentTime属性値を0に設定してから、pause()メソッドを実行できます。
canPlayType（）
canPlayType()ブラウザが特定のタイプのオーディオファイルをサポートしているかどうかを検出し、パラメータとしてmimeタイプの値をサポートするために使用できます。使用上のヒント：
if (myAudio.canPlayType('audio/mpeg')) {
// 如果支持mp3
// 这里搞事情
}canPlayType()このメソッドは、次の3つの値のいずれかを返すことができます。
probablymaybe""（空の文字列）
実際の開発では、空の文字列でない限り、サポートされていると見なすことができます。したがって、次のように、if弱い一致の戻り値を直接使用できます。
var myAudio = document.createElement('audio');
if (myAudio.canPlayType('audio/mpeg')) {
myAudio.setAttribute('src','audiofile.mp3');
}
if (myAudio.canPlayType('audio/ogg')) {
myAudio.setAttribute('src','audiofile.ogg');
}負荷（）
オーディオファイルのロードをトリガーします。ブラウザがpreload属性をサポートしていない場合、この方法は機能しません。
このメソッドには追加のパラメーターはありません。
myAudio.load();5、オーディオメディア読み込みイベント
オーディオの読み込みと関連する処理について説明しましょう。私の実際のプロジェクトの慣例によると、このタイプの読み込みイベントは、プリロードと自動再生の属性の制限により、モバイル端末、特にiOSSafariで常にトリガーされるとは限りません。
loadstart
loadstart事件ロードプロセスが開始され、ブラウザがメディアに接続していることをお知らせください。
myAudio.addEventListener("loadstart", function() {
// 抓取文件
});期間の変更
オーディオファイルの再生時間をできるだけ早く知りたい場合は、durationchangeイベントが非常に役立ちます。オーディオファイルのデフォルトの初期値はNaN、正確な長さが戻ったときにトリガーされ、durationchangeすばやく表示できるためです。オーディオ再生時間。
通常、実際の開発では、00：00プレースホルダーを使用しdurationchange、イベントがトリガーされた後の正確な合計再生時間に置き換えます。
myAudio.addEventListener("durationchange", function() {
// 可以显示播放时长了哟
});ロードされたメタデータ
最初のオーディオファイルのバイトデータが到着すると、loadeddataイベントがトリガーされます。再生ヘッドは設置されていますが、再生する準備ができていません。
myAudio.addEventListener("loadeddata", function() {
// 可以显示播放头
});進捗
progressこのイベントは、メディアファイルがまだダウンロードされているときにトリガーされます。通常、このイベントでは、さまざまな読み込み効果が表示されます。
myAudio.addEventListener("progress", function() {
// 你可以让用户知道媒体文件正在下载
});遊べる
メディアファイルを再生できるようになると、イベントがトリガーされますcanplay。
オーディオプレーヤーをカスタマイズする場合、デフォルトで一部のボタンを無効にし、再生できるときに有効に戻し、canplayイベントを使用できます。
myAudio.addEventListener("canplay", function() {
// 音频可以播放了
});canplaythrough
canplaythroughイベントは、オーディオファイルを最初から最後まで再生できるときにトリガーされます。この状況には、オーディオファイルが最初から最後までロードされているか、ブラウザが時間どおりにダウンロードする必要があると判断し、バッファリングが停止しないことが含まれます。
myAudio.addEventListener("canplaythrough", function() {
// 音频可以不发生缓冲从头播放到结束
});オーディオイベントがトリガーされる順序
メディアイベントの読み込み順序は次のとおりです。
loadstart → durationchange → loadedmetadata → loadeddata → progress → canplay → canplaythrough
ロード割り込みイベント
メディアの読み込みプロセスで何らかの中断が発生したときにトリガーされるイベントもあります。
サスペンド
ファイルが完全にダウンロードされていなくても、メディアデータはプルされなくなります。
アボート
エラーが原因ではなく、メディアデータのダウンロードが中止されました。
エラー
メディアのダウンロード中にエラーが発生しました。たとえば、突然ネットワークがなくなります。または、ファイルアドレスが間違っています。
空になった
エラーまたはload()リロードするために呼び出されたメソッドが原因で、メディアバッファが空になりました。
失速
メディアデータが予期せず利用できなくなりました。
6つのオーディオメディア再生イベント
メディアファイルの再生ステータスに関連するいくつかのイベントがあります。
timeupdate
currentTimeプロパティ値が変更されるたびにtimeupdateイベントがトリガーされます。
実際の開発では、このイベントは250ミリ秒ごとに発生します。このイベントを使用して、再生の進行状況をリアルタイムで表示できます。
myAudio.addEventListener("timeupdate", function() {
// 更新与播放进度相关的内容
});遊ぶ
オーディオファイルにメディア情報（長さなど）がない場合、再生は強制的に停止されます。後で再生が開始されると、playingイベントがトリガーされます。
待っている
メディア情報（継続時間など）が不足しているためにオーディオファイルが停止すると、waitingイベントがトリガーされます。
演奏する
playこのイベントはplay()、メソッドが有効になるか、自動再生によって再生が開始されるとトリガーされます。このイベントによってトリガーされる再生状態は、一時停止から再生までである必要があります。
一時停止
pauseこのイベントはpause()、メソッドが実行されて有効になった後にトリガーされます。このイベントトリガーでは、再生から一時停止への状態変更が必要です。
終了しました
endedイベントは、オーディオファイル全体の再生が終了したときにトリガーされます。
myAudio.addEventListener("ended", function() {
// 当音轨播放完毕时候做你想做的事情
});音量変化
volumechangeミュート動作など、音量が変化するとイベントがトリガーされます。
レートチェンジ
再生速度が変化すると、ratechangeイベントがトリガーされます。
7.バッファ関連の属性とメソッド
メディアファイルの再生の進行状況は、currentTimeとduration属性を使用して取得できますが、バッファの読み込みの進行状況を知りたい場合があります。このとき、バッファに関連する次の属性とメソッドを使用できます。
緩衝
この属性により、オーディオのどの部分がバッファリングされているか（事前にダウンロードされているか）がわかります。TimeRangesというオブジェクトを返します。
myBufferedTimeRanges = myAudio.buffered;シーク可能
seekableこの属性は、さらにバッファリングせずにメディアのその部分に直接ジャンプできるかどうかを通知します。
mySeekableTimeRanges = myAudio.seekable;関連イベントのバッファリング
シーク
このseekingイベントは、メディアリソースが要求されているときにトリガーされます。
求めた
seekingプロパティがになると、イベントfalseがトリガーされますseeked。
バッファリングとTimeRangesに関するより詳細で具体的な知識については、このMDNドキュメントを参照してください。
8.結論と参考文書
この記事に示され<audio>ているこれらのオーディオ要素とさまざまなコールバックイベントに関連するプロパティとメソッド<video>は、ビデオ要素にも使用され、基本的に同じです。多くの自動再生とメディアの自動読み込み戦略も一貫しています。
この記事に示されているこれらのAPIはすべてではありません。欠落を見つけた場合は、それらを追加してください。
参照文書
読んでくれてありがとう、そしてコミュニケーションを歓迎します！