HTML5オーディオ(音声)

HTML5 のオーディオ機能はすでに非常に強力です。これまで Flash でしか実現できなかった再生、ジャンプ、バッファリングなどの機能も、HTML5 のオーディオで簡単に処理できます。

しかし、これまで、Web ページで音声を再生するための標準はまだありませんでした。


オーディオの構文とプロパティとメソッド

構文を使用する


<audio src="song.mp3"controls="controls"loop="loop" autoplay="autoplay">ブラウザはhtml5</audio>のaudioタグをサポートしていません属性
srcは曲のパスです
controls 再生コントロール タグにcontrols="controls"と書くとWebページに付属の再生コントロールが表示されます
loop ソングループ この属性をタグに追加します ソングループをバックグラウンドから取得する場合は、ajaxでloop=true/falseを設定して制御することもできます。 ;
自動再生 曲がロードされると、その後は自動的に再生されますが、それを実現できるのは PC 側だけであり、モバイル側では実現できません (PC 側のブラウザはモバイル側よりもはるかに完成しており、一部の属性はさらに改善されます)
上記はタグ内の属性ですが、もちろん、オーディオを制御するオブジェクト属性としても呼び出すことができます。*

オーディオはラベルであるだけでなく、ウィンドウの下のオブジェクトでもあります。オブジェクトにはプロパティとメソッドがあります。オブジェクトとしてよく使用されるメソッドは何ですか? オブジェクトのプロパティ:

currentTime 現在の再生時間を取得します。

duration 曲を取得します。

play 再生中かどうか true/false を返します。一時停止中かどうか true/false
オブジェクトメソッド:
play() 曲を再生する
pause() 曲を一時停止する
load() 曲をリロードする



HTML5 Medium 3 基本形式:

1.

<audio src="song.ogg" Controls="controls"></audio>

2. 非互換性リマインダーコード付き

<audio src="song.ogg" Controls= "controls">

お使いのブラウザは audio タグをサポートしていません。

</audio>



3. ブラウザの書き込みメソッドと互換性があるようにしてください

<audiocontrols="controls">

<source src="song.ogg" type="audio/ogg">

<source src="song.mp3" type="audio/mpeg" >

お使いのブラウザは audio タグをサポートしていません。 </オーディオ>


りー

学び続ける
||
<!Doctype html> <html> <head> <title>HTML5多媒体</title> <meta charset="utf-8"/> <script> function onInputFileChange() { var file = document.getElementById('file').files[0]; var url = URL.createObjectURL(file); console.log(url); document.getElementById("audio_id").src = url; } </script> </head> <body> <input type="file" id="file" onchange="onInputFileChange()"> <audio id="audio_id" controls autoplay loop>Your browser can't support HTML5 Audio</audio> </body> </html>
  • おすすめコース
  • コースウェアのダウンロード
現時点ではコースウェアはダウンロードできません。現在スタッフが整理中です。今後もこのコースにもっと注目してください〜
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!