オーディオ・動画の操作：
オーディオの経過時間を整形して返す
指定したAudioエレメントの経過時間か残り時間を時・分・秒に分けて整形する。
Audio
Audioエレメントを渡す 文字列ではない点に注意
String
区切り文字を指定 省略した場合は配列で返す
Bool
経過時間ではなく残り時間を返す true = 残り時間 ・ false = 経過時間 ／ 省略した場合は false となる
●必須引数 ●オプション引数(省略可能)
記述例
$audioCurrentTime(anAudio)
$audioCurrentTime(anAudio, ':')
$audioCurrentTime(anAudio, true)
$audioCurrentTime(anAudio, '-', true)
戻り値
○区切り文字を省略した場合
・時・分・秒の数値を配列にして返す。
配列[0]：時
配列[1]：分
配列[2]：秒
○区切り文字を指定した場合
・指定した区切り文字で連結した文字列を返す。
(例) 1:15:30
動作サンプル
Audioエレメントを再生して、経過時間と残り時間を出力する。
HTML :
<button type="button" onclick="setup1()">Audio1を再生</button>
<button type="button" onclick="$audioCurrentTime(audio1,':')">経過時間を出力</button>
<button type="button" onclick="$audioCurrentTime(audio1,':',true)">残り時間を出力</button>
<button type="button" onclick="sample_remain()">残り時間を連続して出力</button>
<button type="button" onclick="$audioFadeout(audio1)">停止</button> //音量を徐々に下げてから停止
Javascript :
var audio1=new Audio(); //Audioエレメントを定義
audio1.preload="metadata";
function setup1() { //Audioエレメントを準備して再生
audio1.src="audio/cmn_snd_sound1.mp3";
audio1.volume=0.5;
audio1.play();
}
var sample_timer;
function sample_remain() { //残り時間を繰り返し取得する
var remainTime=$audioCurrentTime(audio1,':',true);
sample_timer=setTimeout(sample_remain,200);
}
この関数を利用した簡単なオーディオインターフェース。
00:00
00:00
HTML :
<div id="sample2">
<div>
<button type="button" id="audio_ui" onclick="playstop()"></button>
</div>
<div>
<div id="time1">00:00</div>
<div id="time2">00:00</div>
<div id="audio_ui_bar"></div>
<div id="audio_ui_knob" onmousedown="handling(true);$ddHandler('audio_ui_knob','LR',80,452,5.33,69.86);" ontouchstart="handling(true);$ddHandler('audio_ui_knob','LR',80,452,5.33,69.86);" onmouseup="handling(false)" ontouchend="handling(false)"></div>
</div>
</div>
Sass :
#sample2 {
display: flex;
& > div:nth-child(1) {
button#audio_ui {
width: 60px;
height: 60px;
background: url(../images/cmn_btn_audio_ui.svg) no-reeat center top;
background-size: 60px auto;
border: none;
}
}
& > div:nth-child(2) {
position: relative;
#audio_ui_bar {
position: absolute;
left: 80px;
width: 400px;
}
#audio_ui_knob {
position: absolute;
left: 80px;
width: 28px;
height: 28px;
}
}
}
Javascript :
function setup2() {
audio2.src="audio/cmn_snd_sound2.mp3";
audio2.volume=0.5;
setTimeout(mouseMonitor,1000); //ページの読み込みを待つくらいのタイムラグを
}
function mouseMonitor() {
$startMouseMonitor(true); //$ddHandler()を機能させるために必要な関数
}
function ddHandlerLR(nowX,tarId) {
var numFull=452-80; //372 可動範囲：80〜452
var nowPer=(nowX-80)/numFull*100;
audio2.currentTime=nowPer; //ノブの位置にAudioエレメントの再生位置を移動
}
var timer2;
function playstop() {
audioHandlingStatus=false; //ノブ操作の状態を調整
if(audio2.paused) { //再生状態のスイッチ
audio2.play();
$id("audio_ui").style.backgroundPosition="center bottom";
timer2=setTimeout(updateTime,100);
} else {
clearTimeout(timer2);
audio2.pause();
$id("audio_ui").style.backgroundPosition="center top";
}
}
function updateTime() {
//経過時間を更新
var currentStr=$audioCurrentTime(audio2,':');
$toHTML("time1",currentStr);
//残り時間を更新
var remainStr=$audioCurrentTime(audio2,':',true);
$toHTML("time2",remainStr);
//ノブ操作をしていない時だけ処理：ノブの位置を再生位置に合わせる
if(!audioHandlingStatus) {
var playPer=audio2.currentTime/audio2.duration;
$id("audio_ui_knob").style.left=80+(372*playPer)+"px";
}
if(audio2.currentTime==audio2.duration) { //再生終了状態
//再生状態にしてからすぐに切り替えの関数を起動してボタンの状態を変える
audio2.play();
playstop();
} else {
timer2=setTimeout(updateTime,100);
}
}
var audioHandlingStatus=false;
function handling(tarStatus) { //ノブのドラッグ中かどうかを管理
audioHandlingStatus=tarStatus;
}
※上記のサンプルコードは主にPC表示用を想定している。スマホ用のコーディングでは別途調整が必要となる可能性がある。
※この関数の動作サンプルとして必須ではない装飾的なCSSコードなどは省略して提示している。
※この関数の動作サンプルとして必須ではない装飾的なCSSコードなどは省略して提示している。