如何使用一個按鈕切換音頻播放/暫停
[英]How to toggle audio play/pause with one button
問題描述
我以前從未真正使用過javascript，但是我嘗試使用Google搜索來尋找一種解決方案，以解決如何制作音頻的播放/暫停按鈕的問題-我發現該網站上的解決方案似乎很簡單： 如何切換音頻play（）一個按鈕或鏈接的pause（）？ （PS。我的名聲還不足以評論Iceman的解決方案，並直接問他可能有什么問題-如果可以的話，我會的。）
但是，當我將代碼段粘貼到文檔中時，什么也沒有發生（結果文本不可單擊）。 你們中的一些人可以看看我是否做錯了嗎？ 這很有可能是愚蠢的，但我自己看不到。
到目前為止的Index.html：
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>Ukendt Navn ...</title> <script> 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> <style type="text/css"> #content { border: 1px solid blue; margin: auto; max-width: 20vw; margin-top: 30vw; color: black; } </style> </head> <body> <div id="content"> <audio id="myAudio" src="birds.mp3" preload="auto"></audio> <a onClick="togglePlay()">Click here to hear.</a> </div> </body> </html>
我的測試網站： http : //wyrdling.com/other/ukendtnavn/
1 個解決方案
解決方案1
3 已采納 2018-05-03 11:11:11
您正在嘗試在元素加載之前調用document.getElementById("myAudio") ，因此可以在頁面完全加載之后調用它，也可以將腳本放在body標簽末尾之前。
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>Ukendt Navn ...</title> <script> window.addEventListener('load', function(){ var myAudio = document.getElementById("myAudio"); myAudio.onplaying = function() { isPlaying = true; }; myAudio.onpause = function() { isPlaying = false; }; }); var isPlaying = false; function togglePlay() { if (isPlaying) { myAudio.pause() } else { myAudio.play(); } } </script> <style type="text/css"> #content { border: 1px solid blue; margin: auto; max-width: 20vw; margin-top: 30vw; color: black; } </style> </head> <body> <div id="content"> <audio id="myAudio" src="http://wyrdling.com/other/ukendtnavn/birds.mp3" preload="auto"></audio> <a onClick="togglePlay()">Click here to hear.</a> </div> </body> </html>
如何通過一個按鈕或鏈接切換音頻播放（）暫停（）？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.