HTML5 audioタグでの音源の再生,停止,ミュート,スキップ,初期化,現在の再生時間取得などのまとめ

この記事は4年前に書かれました。不適当な記述を含む場合がありますので、参考程度に留めてください。

どうもこんばんは。Toshikuraです。今回のTipsは【HTML5 audioタグでの音源の再生,停止,ミュート,スキップ,初期化,現在の再生時間取得などのまとめ】です。以前「HTML5 audio 音源の拡張子やブラウザの対応状況」という記事でも一部書きましたが、本記事はより具体的な続編です。タイトルでは”等”と省略しましたが、音の再生、一時停止、特定時間への移動、スキップ、リセット、ミュート、再生速度の上げ下げ、再生時間の取得、合計時間の取得、ボリュームの指定、jQueryを使ったオリジナルプログレスバーの設定、はたまた再生中やボリューム変更等のタイミング取得が対象になります。

はじめに

まずはじめに、HTML5でのaudioタグの基本的な記述です。このタグにloopやcontrolを追加する事で、再生のループやコントロールの表示が設定できます。先読みの目安に関しましてはHTML5リファレンス プラグインを使わずに音声を再生するをご参照下さい。
 

<audio id="sound">
<source src="s.mp3">
<source src="s.ogg">
<p>※ご利用のブラウザでは再生することができません。</p>
</audio>

ループ再生 / コントローラを表示 / 自動再生 / ミュート

<audio id="sound" loop controls autoplay muted>

 

再生、停止等、javascriptを使った操作

ここからが本題です。javascriptを使った操作例をまとめていきます。まずはJS発火のタイミングを指定する為のHTMLです。これに関しては、デモにて一連のコードが確認できますので、そちらをご参照頂くのが一番速いかと思います。基本短くする為に命名が適当ですので、ご利用の際には改変 or 参考程度にお考えください。
 

<audio id="sound">
<source src="s.mp3">
<source src="s.ogg">
<p>※ご利用のブラウザでは再生することができません。</p>
</audio>
<a onclick="play();">PLAY</a>
<a onclick="pause();">PAUSE</a>
<a onclick="go(30);">GOTO(30s)</a>
<a onclick="skip(10);">SKIP(10s)</a>
<a onclick="reset();">RESET</a>
<a onclick="mute();">MUTE</a>
<a onclick="rateup(0.5);">RATEUP(+0.5)</a>
<a onclick="ratedown(0.5);">RATEDOWN(-0.5)</a>
<a onclick="timeupdate();" id="btn_time">TIMEUPDATE</a>
<a onclick="duration();" id="btn_duration">TOTAL</a>
<a onclick="volume(0.3);">VOLUME(0.3)</a>

対象の指定
var TARGET = document.getElementById(‘sound’);
再生
function play(){
TARGET.play();
}
一時停止
function pause(){
TARGET.pause();
}
特定時間への移動
function go(seconds){
TARGET.currentTime = seconds;
}
スキップ
function skip(seconds){
TARGET.currentTime += seconds;
}
リセット
function reset(){
TARGET.pause();
TARGET.currentTime = 0;
}
ミュート
function mute(){
if(TARGET.muted){
TARGET.muted = false;
}else{
TARGET.muted = true;
}
}
再生レートUP
function rateup(Num){
// play()後反映、1が通常、0が停止
TARGET.play();
TARGET.playbackRate += Num;
}
再生レートDOWN
function ratedown(Num){
TARGET.play();
TARGET.playbackRate -= Num;
}
現在の再生時間取得
function timeupdate(){
TARGET.play();
TARGET.addEventListener(“timeupdate”, function() {
var NOW = Math.floor(TARGET.currentTime);
document.getElementById(‘btn_time’).innerHTML = NOW + ‘s’;
}, true);
}
合計時間の取得
function duration(){
var TOTAL = Math.round(TARGET.duration);
document.getElementById(‘btn_duration’).innerHTML = TOTAL + ‘s’;
}
ボリュームの指定
function volume(Num){
TARGET.volume = Num;
}
jQueryを使ったオリジナルプログレスバーの設定


<div id="barBd"><div id="bar"></div></div>
<script>
var TARGET = document.getElementById(‘sound’);
$(function(){
$(‘a’).click(function(){
if(!TARGET.paused){
var TOTAL = Math.round(TARGET.duration);
TARGET.addEventListener(“timeupdate”, function() {
var NOW = Math.round(TARGET.currentTime);
var PERCE = (NOW / TOTAL * 100) + ‘%’;
$(‘#bar’).css({‘width’:PERCE});
}, true);
}
});
});
</script>

 

再生中やボリューム変更のタイミングの取得

また上記の操作以外にも再生中、ボリューム変更のタイミング、シーク操作のタイミング等も取得可能です。詳しくは下記のコードをご確認ください。
 


<audio id="sound" controls loop
onabort="console.log('abort');"
oncanplay="console.log('canplay');"
oncanplaythrough="console.log('canplaythrough');"
ondurationchange="console.log('durationchange');"
onemptied="console.log('emptied');"
onended="console.log('ended');"
onerror="console.log('error');"
onloadeddata="console.log('loadeddata');"
onloadedmetadata="console.log('loadedmetadata');"
onloadstart="console.log('loadstart');"
onpause="console.log('pause');"
onplay="console.log('play');"
onplaying="console.log('playing');"
onprogress="console.log('progress');"
onratechange="console.log('ratechange');"
onreadystatechange="console.log('readystatechange');"
onseeked="console.log('seeked');"
onseeking="console.log('seeking');"
onstalled="console.log('stalled');"
onsuspend="console.log('suspend');"
ontimeupdate="console.log('timeupdate');"
onvolumechange="console.log('volumechange');"
onwaiting="console.log('waiting');">
<source src="sound.mp3">
<source src="sound.ogg">
</audio>

以上になります。