Q&A
ボタンを作成し、音声ファイルを再生・一時停止する
初心者なので初歩的な質問になってしまうのですが、以下のコードが上手く作動しません。
HTML
1<html lang="ja"> 2 <head> 3 <meta charset="utf8"> 4 <title>ページのタイトル</title> 5 </head> 6 <body> 7 <script src="test4img.js"></script> 8 <audio id="aoudio" src="ファイル名.mp3"></audio> 9 <button id="play">再生</button> 10 <button id="pause">一時停止</button> 11 </body> 12</html> 13
JavaScript
1var audio = document.getElementById("audio"); 2var play = document.getElementById("play"); 3var pause = document.getElementById("pause"); 4play.onclick = playaudio(); 5pause.onclick = pauseaudio(); 6function playaudio() { 7 audio.play(); 8} 9function pauseaudio() { 10 audio.pause(); 11} 12
ボタンは表示されるのですが、イベントハンドラ部分が間違っているのか押しても何も起こりません。コンソールにはJSの**aoudio.play(),aoudio.pause()**の「play」「pause」が「Cannot read property」と表示されます。.playで音声が再生されるメソッドという認識なのですが、間違っているのでしょうか？アドバイスよろしくお願い致します。
回答1件
0
ベストアンサー
<script src="test4img.js"></script>
<audio id="aoudio" src="ファイル名.mp3"></audio> <button id="play">再生</button> <button id="pause">一時停止</button>
これだと、対象のHTMLが読み込まれる前に要素を読もうとするのでgetElementByIdはnullを返すはずです。
エラーが出ているはずなので、ブラウザ開発ツールのコンソールを確認してみてください。
<script src="test4img.js"></script>を</body>の直前に持ってくるか、DOMContentLoadedイベントをかませてからgetElementByIdを入れるかどちらかで対応してみてください。
（あくまでJavaScriptから要素が参照できるようになるだけで想定通りに動くかは別です）
投稿2020/10/22 04:39
総合スコア80875
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。