最後まで読み込まれた時に発火するイベントというのは、調べてみた限りではなさそうでした。
厳密にファイルが最後まで読み込まれたかどうかというよりは、最後まで途切れることなく再生できる十分なデータを読み込めたかどうかがわかれば良い程度であれば、canplaythrough
イベントで行けそうな気がします(ブラウザ対応状況はまちまちのようなので要確認)
HTML
<audio controls id="audio" src="sample.mp3" preload=auto></audio>
JS
var $audio = document.getElementById('audio');
$audio.addEventListener('loadstart', function(e) {
console.log('loadstart', $audio.readyState)
})
$audio.addEventListener('loadedmetadata', function(e) {
console.log('loadedmetadata', $audio.readyState)
})
$audio.addEventListener('loadeddata', function(e) {
console.log('loadeddata', $audio.readyState)
})
$audio.addEventListener('durationchange', function(e) {
console.log('durationchange', $audio.readyState)
})
$audio.addEventListener('canplaythrough', function(e) {
console.log('canplaythrough', $audio.readyState)
})
$audio.addEventListener('canplay', function(e) {
console.log('canplay', $audio.readyState)
})
Log
"loadstart" 0
"durationchange" 1
"loadedmetadata" 1
"loadeddata" 4
"canplay" 4
"canplaythrough" 4
readyState
https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/readyState
Constant | Value | Description |
---|
HAVE_NOTHING | 0 | No information is available about the media resource. |
HAVE_METADATA | 1 | Enough of the media resource has been retrieved that the metadata attributes are initialized. Seeking will no longer raise an exception. |
HAVE_CURRENT_DATA | 2 | Data is available for the current playback position, but not enough to actually play more than one frame. |
HAVE_FUTURE_DATA | 3 | Data for the current playback position as well as for at least a little bit of time into the future is available (in other words, at least two frames of video, for example). |
HAVE_ENOUGH_DATA | 4 | Enough data is available—and the download rate is high enough—that the media can be played through to the end without interruption. |
最後まで読み込み完了を本当に探知する必要がある場合
対策候補1
もっと、細かく読み込まれたデータ量をもとに何かをしたいのであれば、bufferedプロパティーなるものがあるので、その辺りでプログマティックに対応ができるかもしれません。しかし、html5のvideo、audioはストリーミングだと思うので、ダウンロードと違って、そもそも最初から最後まで読み込まれるということ自体がないのでは?
var $audio = document.getElementById('audio');
$audio.addEventListener('progress', function(e) {
console.log('buffered', $audio.buffered)
console.log('duration', $audio.duration)
console.log('length', $audio.buffered.length)
for (var i = 0; i < $audio.buffered.length; i++) {
console.log('start', i, $audio.buffered.start(i))
console.log('end', i, $audio.buffered.end(i))
}
})
対策候補2
http://dinbror.dk/blog/how-to-preload-entire-html5-video-before-play-solved/
上記記事のsolution#4として紹介されている方法が参考になるかと思います。
追記
ちなみに音は10個以上あり、全ての読み込みが終了した時点で処理を実行したいです。
audioタグが10個以上あり、それぞれで別の音声ファイルを読み込んでいるのでしょうか?
そして、それら全てのaudioタグに対し、1つだけ再生ボタンが紐付いているから、
全ての読み込みが終了した時点で処理を実行したいということなのでしょうか?
各audioタグに対して、それぞれ1つの再生ボタンが紐付いているということなのであれば、
全部が読み込み終わるまで何かの処理の実行を行わずに待つということも不要だと思ったので、
一応、確認です。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/03/25 14:58
2018/03/26 08:36