読者です 読者をやめる 読者になる 読者になる

HTML5のAudioタグではなくAudioオブジェクトで音声を再生する

f:id:rankasan:20170318165553j:plain

HLML5で追加されたaudioタグ。使いづらくないですか?controlsでUIが表示出来るのはいいんですが、カスタマイズできなかったり、ブラウザによって表示が変ったりと、いまひとつなんですよね。HTML5の規約でcontorlsのデザインまで規定されていないのでしかないのですが。そんな訳で、タグではなくAudioオブジェクトを利用して、音声再生するサンプルを書いてみました

サンプルコード

audio.srcに音声ファイルのURLを設定しています。これはAudioクラスのコンストラクタ引数でもOKです。次にaudioのendedイベントにbindして、再生終了をハンドリングしています。終了したらボタンを「再生」に変えているだけですね

最後はボタンのclickイベントのハンドラの実装です。audio.endedで再生終了しているか、audio.pausedで停止中かを判断できます。終了または停止中の時は、audio.currentTimeで再生位置を0(開始位置)戻してaudio.play()で再生開始しています。再生中の時はaudio.pause()で停止しています

極々簡単なサンプルですが、controlsでUIを強制されるより、マシじゃないですかね

デモ

30秒程度の音楽が流れます。音量注意

プライバシーポリシー