この非常に単純な HTML5 + Javascript コードに問題があります。ロードされた直後にサウンドを再生しようとします。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Test page</title>
</head>
<body>
<audio src="freedom.wav"
id="audio1"
preload='auto'
onloadeddata="alert('the sound has been loaded !'); document.getElementById('audio1').play();"
></audio>
<input type="button" value="Play it again !" onclick="document.getElementById('audio1').play();" />
</body>
</html>
ご覧のとおり、HTML5 オーディオ タグを使用してサウンドを読み込んでいます。サウンドが完全に読み込まれると、イベント「onloadeddata」が起動され、Javascript コードが実行されます。このコードはアラート ウィンドウを表示し、すぐにサウンドの再生を開始します。alert() 呼び出しは、サウンドが正常にロードされたことを視覚的に通知するためにあります。
しかし、ここに問題があります。play() 呼び出しは機能しますが、alert() ウィンドウが表示されてから数秒後にサウンドが再生されます。この遅延は私にとって問題です。なぜなら、サウンドが実際にすぐに再生できる状態になったことを知らせるインジケーターが必要だからです。そして、「onloadeddata」はこれらの要件を満たしていないようです。
最初の play() が成功すると、以降の play() 呼び出しで遅延が発生しないことに注意してください。「Play it again!」でこれを確認できました。button : ボタンをクリックした後、最初の play() が通過した直後にサウンドが再生されます。
play() の最初の呼び出しでこの遅延の解決策があるかどうか誰か教えてもらえますか? または、サウンドが実際にいつ再生できるかを教えてくれる方法はありますか?
私はGoogle Chromeを使用しています。
どうもありがとうございました !