JavaScriptでaudioタグの再生時間を設定する

  • このエントリーをはてなブックマークに追加

はじめまして
私はカルティクです。
※インドから来たカレー人間です。

メール送信

Audioファイルを再生している途中で開始時間と終了時間を指定して、その時間だけの内容を聞きたいという要望があり、
それを解決できた方法を紹介します。

■やりたいこと
①再生ボタンを押してから、指定したい開始位置で開始時刻ボタンを押すと開始時間が設定される。
②再び再生ボタンを押して音声を再生し、指定したい終了位置で終了時刻を押すと終了時間が設定される。
③その状態で限定再生するボタンを押すと限定した範囲で音声が再生される。

実装コードは以下のようにしました。

■HTML部分

/*
 * HTML
 */
<hr>

<div class="full-sound">
    <audio name="sound" controls controlsList="nodownload">
        <source src="https://hpr.dogphilosophy.net/test/wav.wav" type="audio/wav">
    </audio>
</div>

<input type="button" name="start_time" value="開始時刻"> → 
<label name="select_start_time"></label>
<br>
<input type="button" name="end_time" value="終了時刻"> → 
<label name="select_end_time"></label>

<br>
<hr>
<br>

<div>
    <input type="button" name="limited_sound" value="開始と終了を反映した音声を再生" data-start_time="" data-end_time="">
</div>

<audio name="limit_sound" preload="auto" controls controlsList="nodownload">
    <source src="https://hpr.dogphilosophy.net/test/wav.wav" type="audio/wav">
</audio>

<hr>

音声ファイルを表示するためのHTMLタグを記載しています。
再生する開始時間と終了時間を決めるためにそれぞれを指定するためのボタンを設置しました。
※限定再生と、もとの再生を比較できるように、divタグで別々に表示しています。

■JS部分

/*
 * jQuery
 */
// 開始時刻ボタンクリックイベント
$('[name="start_time"]').click(function(){
    var cur_time = $('[name="sound"]').get(0).currentTime;
    $('[name="limited_sound"]').attr('data-start_time', cur_time);
    $('[name="select_start_time"]').text((cur_time/100).toFixed(2));
});
// 終了時刻ボタンクリックイベント
$('[name="end_time"]').click(function(){
    var cur_time = $('[name="sound"]').get(0).currentTime.toFixed(2);
    $('[name="limited_sound"]').attr('data-end_time', cur_time);
    $('[name="select_end_time"]').text((cur_time/100).toFixed(2));
});
// 音声ボタンのクリックエベント
$('[name="limited_sound"]').click(function(){
    var starttime = $(this).attr('data-start_time');
    var endtime = $(this).attr('data-end_time');
    var media = find('#limit_sound').get(0);
    media.load();
    media.currentTime = starttime;
    media.duration = endtime;
    media.play();
});

ここで問題が発生しました。「開始時刻」と「終了時刻」ボタンを押してから限定再生するボタンを押すと、
「開始時刻」から指定した終了時間ではなく最後までの音声になってしまいました。

実は「duration」とは全体の長さ(秒数)を取得する為に使用するもので、
終了時間として設定してもうまくいかないことがわかったので、
JSの処理を以下のように修正しました。

/*
 * jQuery
 */
// 音声ボタンのクリックエベント
$('[name="limited_sound"]').click(function(){
    var starttime = $(this).attr('data-start_time');
    var endtime = $(this).attr('data-end_time');
    var $audio = $('[name="limit_sound"]');
    var audio_src = $('source', $audio).attr('src');
    var splt_audio_src = audio_src.split('#');

    // 再生時間の設定
    $('source', $audio).attr('src', splt_audio_src[0]+'#t='+starttime+','+endtime);
    var media = $audio.get(0);
    media.load();
    media.play();
});
$('source', $audio).attr('src', splt_audio_src[0]+'#t='+starttime+','+endtime);

時間を設定する部分をこのように書くと下記のようになります。

<source src="neko.wav#t=1.0,2.0" type="audio/wav">

※1.0秒時点から2.0秒時点まで限定再生する設定です。

#t=[starttime][,endtime]
時間は秒数 (浮動小数点数値として) または時/分/秒をコロン区切り (2時間5分1秒を2:05:01というように) で指定できます。

上記のように設定して、限定再生するボタンを押すと指定した時間だけの再生になりました!

####
■jQueryを使って、開始と終了時間を設定しなくても audio属性の「src」で設定するだけで、開始と終了を制御できることを知りました!
単純そうですが、思ったように記事が見つからずに、とても悩まされましたが、解決ができてよかった!是非みなさんも参考にしてください。

/******************
 私が参考にした記事 
*******************/
HTML5 の audio 要素と video 要素の使用
HTML5_audio_and_video

/******************
 実際に動くデモページ 
*******************/
デモページ

  • このエントリーをはてなブックマークに追加

SNSでもご購読できます。

コメントを残す

*