Q&A
画像をクリックすると音楽が再生して、またクリックをすると停止する仕組みを作りたいです。
Audio.min.jsはこちらよりダウンロードしました。http://kolber.github.io/audiojs/
対象コードは下記になります。
<html> <head> <script src="audiojs/audio.min.js"></script> <script> audiojs.events.ready(function() { audiojs.createAll(); }); </script> <script type="text/javascript"> var myAudio = document.getElementById("myAudio"); var isPlaying = false; function togglePlay() { if (isPlaying) { myAudio.pause() } else { myAudio.play(); } }; myAudio.onplaying = function() { isPlaying = true; }; myAudio.onpause = function() { isPlaying = false; }; </script> </head> <body> <audio id="myAudio" src="audio/audiofile.mp3" preload="auto"></audio> <a onclick="togglePlay()"><img src="images/button.jpg" alt="Play Music" ></a> </body> </html>
画像をクリックしようとしましたが、クリックもできませんでした。
Audioを再生しようとしてみましたが、再生ができませんでした。
どうぞよろしくお願いします。
回答1件
0
ベストアンサー
var myAudio = document.getElementById("myAudio"); で myAudio の値が null になっているようです。
2つめの <script> タグを <audio> タグより下に移動してみてください。
<script> タグを下に持ってくるのが嫌なら DOMContentLoaded イベントを調べてみてください。
https://developer.mozilla.org/ja/docs/Web/Events/DOMContentLoaded
投稿2019/04/17 12:54
総合スコア448
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/04/18 01:22