Q&A
second変数の定義はどこでしていますか？
前提・実現したいこと
ブラウザでJSを使って、オーディオを扱っています。
そこで、以下のコードを書いたのですが、問題が発生しています。
該当のソースコード
JavaScript
1audio.play(); 2 3audio.addEventListener('timeupdate', function() { 4 if (audio.currentTime < second) { 5 audio.currentTime = second; 6 } 7});
発生している問題
①オーディオが再生される
②timeupdateイベントが発生する
③addEventListenerが呼び出される
④audio.currentTime < secondがtrueになる
⑤audio.currentTime = second;が実行され、timeupdateイベントが発生する
⑥addEventListenerが呼び出される
⑦audio.currentTime < secondがfalseになる
⑧audio.currentTime = second;が実行されず、timeupdateイベントは発生しない
⑨addEventListenerは呼び出されない
となるのが筋だと思うのですが、
⑦がtrueになり続け、④〜⑥が無限ループしてしまいます。
なぜこの問題が発生しているのかわかりません。
原因と解決方法を教えてください。
お願いします。
試したこと
setIntervalで常に監視する方法も考えましたが、
そうじゃない感がすごいので実装はしていません。
発生したイベントを無効化する方法も考えましたが、
有効な手段には辿り着いていません。
second の値を教えてください。
実際のコードは以下のようになっています。
また、```sourceR```の```max```は、
```loadedmetadata```のタイミングで```sourceR.max = audio.duration;```
としています。
```HTML
<input type="range" min="0" value="0" step="any" id="sourceR">
```
```JS
let sourceR = document.getElementById('sourceR');
audio.addEventListener('timeupdate', function() {
if (audio.currentTime < sourceR.value) {
audio.currentTime = sourceR.value;
}
});
```
無限ループになる時の second の値を教えてください。
0以外の時は必ず無限ループに陥ります。
timeupdateの中にconsole.log(sourceR.value)を追加し、値を観察してみてください。
ちなみにjsfiddleやcodepanなどで問題を再現できるための最小限のコードを提供できると回答者にとって楽になると思います。
そのソースコードを、
質問本文に記載してください。
質問は編集できます。
確認してませんけども、数値と文字列を比較したり代入しているのと、sourceR.value の精度が高すぎると currentTime に代入するときに切り捨てが起きそうなのが気になりますね。
>0以外の時は必ず無限ループに陥ります。
当方の環境では、小数点で四捨五入した時に切り捨てる値の時に問題が再現するように感じましたが、それは違いますか？
あ、先に int32_tさんがご指摘されていたか。これが本命っぽいな……
回答3件
0
ベストアンサー
audio.currentTimeは精度が小数第6位までなので、それよりも精度の高い小数を代入しようとすると、小数第7位を切り捨てた値が代入されます。
そのため、例えばsourceR.valueが1.2345678のとき、代入後のaudio.currentTimeは1.234567となり、audio.currentTime < sourceR.valueがtrueとなってしまうため、無限ループが発生します。
精度は小数点以下が2,3桁くらいあればよいと思うので、sourceR.valueの小数第4位を四捨五入した値とaudio.currentTimeを比較し、条件を満たす場合はそれをaudio.currentTimeに代入します。
JavaScript
1document.addEventListener('DOMContentLoaded', function () { 2 let audio = document.getElementById('audio'); 3 let sourceR = document.getElementById('sourceR'); 4 5 audio.addEventListener('loadedmetadata', function () { 6 sourceR.max = audio.duration; 7 }); 8 9 audio.addEventListener('timeupdate', function () { 10 //console.log(audio.currentTime); 11 let value = Math.round(sourceR.value * 1000) / 1000; 12 if (audio.currentTime < value) { 13 audio.currentTime = value; 14 //console.log('changed!'); 15 } 16 }); 17}); 18
投稿2021/12/02 06:41
総合スコア501
0
int32_tさんの言った通りに、比較する前に数値に変更してみたらどうですか？
JavaScript
1if (Math.round(parseFloat(audio.currentTime) < Math.round(parseFloat(sourceR.value)))) {
投稿2021/12/02 04:14
総合スコア910
あなたの回答
tips
プレビュー
