久々のメモ
いつまでたってもブラウザの企画というのは統一されないようで。。。
特にIEは。。。と感じてしまいます。
html5が普通に使われるようになってもう随分経ちますが、オーディオプレーヤーを自作する必要に迫られまして、作った時に苦労したのでメモ。
なんで迫られたかといいますと、
・プレーヤーを置く場所がボタン1個分のスペースしかない
・audioタグ属性のcontrolsだと右クリックで簡単に音源をダウンロードできてしまうので、それを避けたい。
というのがおおまかな理由です。
IE以外のブラウザは
audioObj = new Audio();
みたいな感じでオーディオオブジェクトを生成すれば何てことはなくオリジナルのプレーヤーを作れてしまうのですが、IEはこの宣言が使えない。。。
なんで？？
って事で別方向からのアプローチ。
とりあえずソースはこんな感じ
sample.html
---------------------------------
<audio id="sample">
<source src="sample01.mp3">
</audio>
<button class="player" onclick="playAudio()">再生</button>
<button class="player" style="display: none" onclick="stopAudio()">停止</button>
---------------------------------
sample.js
---------------------------------
function playAudio(){
document.getElementById("sample").currentTime = 0;
document.getElementById("sample").play();
$(".player").toggle();
}
function stopAudio01(){
document.getElementById("sample").pause();
$(".player").toggle();
}
---------------------------------
IEの場合body内のどこかにaudioを宣言しておく必要があるみたい。
なのでわかりやすいようにボタンの上らへんで宣言。
再生ボタンを押したら、オーディオ再生後、jqueryのtoggle()を使って停止ボタンを表示させるといった仕組み。
.play()の前に
.currentTime = 0;
としているのは、audioタグにはストップ（停止して頭に戻る）という命令がないらしい。
あるのは
pause()
要は一時停止。
なのでpauseのままだともう一度再生ボタンを押したら曲の途中から始まっちゃうわけ。
なんでstopがないの？？
って事でplay()させる前に一度頭に戻して再生するということをここでやってます。
終わってみればだらだら長いプログラムでもないので、気楽で良いスクリプトかも。。。
まぁプロの人から見れば落とし穴満載なんだろうけど。。。
