質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

2回答

8556閲覧

audio 音 のロード終了時に「ロード完了」と表示させたい

kumasan3

総合スコア11

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

1クリップ

投稿2018/03/21 14:34

audioの読み込みが終了したことを知る方法はありますか?
【現状】
音の読み込みが終了する前に再生ボタンを押されると、長らくサイレントで何も起こらず、読み込まれたタイミングで突然その音が再生されます。
理想の状態は、読み込みの最中には「読み込み中」と表示され、読み込み終了後に「再生する」と表示されていることです。ちなみに音は10個以上あり、全ての読み込みが終了した時点で処理を実行したいです。

HTML

1<audio src="sound.mp3" preload="auto" id="sound"></audio> 2<span id="play_button">読み込み中</span>

javascript

1jquery 2$("#play_button").click(function(){ 3 $("#sound").play(); 4}) 5

試したこと(1)
以下では読み込み完了時点ではなく、開始時点で処理が実行されてしまいます。

javascript

1 $("audio").on("load",function(){ 2 $("span").text("再生する");

試したこと(2)
.when と done を使っても、全く読み込みすらされない、もしくは読み込み開始時点で処理が実行されてしまいます。

javascript

1 $.when( 2 $("audio").load() 3 ).done(function(){ 4 $("#yomikomi").text("音声の読み込みが終了しました。") 5 })

英語の記事も読み解決策を探していますがなかなか解決できません。
教えていただけると大変嬉しいです。
ちなみに、方法によっては画像の読み込みでは使えても、音声の読み込みだと使えない場合もあるようです。
よろしくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

最後まで読み込まれた時に発火するイベントというのは、調べてみた限りではなさそうでした。

厳密にファイルが最後まで読み込まれたかどうかというよりは、最後まで途切れることなく再生できる十分なデータを読み込めたかどうかがわかれば良い程度であれば、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

ConstantValueDescription
HAVE_NOTHING0No information is available about the media resource.
HAVE_METADATA1Enough of the media resource has been retrieved that the metadata attributes are initialized. Seeking will no longer raise an exception.
HAVE_CURRENT_DATA2Data is available for the current playback position, but not enough to actually play more than one frame.
HAVE_FUTURE_DATA3Data 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_DATA4Enough 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/21 17:05

編集2018/03/22 08:26
HayatoKamono

総合スコア2415

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kumasan3

2018/03/25 14:58

ご丁寧な解答ありがとうございました。 おっしゃる通りに必要な分だけの読み込みを探知し、そのタイミングで再生ができるようにすれば可能かと思います。ですがweb Audio APIでより速く実装できそうなので、一旦これでトライしてみます。 追記に関しては、10個以上の音とそれに対応する数の再生ボタンがあります。しかし、現在外国語の単語を再生するゲームを作っており、全ての音が読み込まれ再生可能になったタイミングでゲームを開始できるようにしようとしていました。
HayatoKamono

2018/03/26 08:36

お、良かったです。web audio apiでというより、コピペで速く実装出来そうということですね。
guest

0

自己解決

Web Audio Api を使うことで解決できました。
細かいことはどうなっているかはまだわかりませんが、stack overflow にて解決の投稿かありました。
https://stackoverflow.com/questions/19780670/getting-rid-of-lag-time-when-playing-sound-with-jquery

【デモ】
http://jsfiddle.net/epistemex/y491bbt0/

このデモによると、読み込み中のときは loading... と表示され、読み込み終了後に Ready!と表示され、音が再生可能になります。

投稿2018/03/25 14:50

kumasan3

総合スコア11

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問