如何使用一个按钮切换音频播放/暂停
[英]How to toggle audio play/pause with one button
问题描述
I never really worked with javascript before, but I tried googling for a solution to how to make a play/pause button for audio - and I found what appears to be a good and simple solution on this site: How to toggle audio play() pause() with one button or link? 
我以前从未真正使用过javascript，但是我尝试使用Google搜索来寻找一种解决方案，以解决如何制作音频的播放/暂停按钮的问题-我发现该网站上的解决方案似乎很简单： 如何切换音频play（）一个按钮或链接的pause（）？ (PS. I don't have reputation poins enough to comment on Iceman's solution and ask him directly what might be wrong - I would have if I could.) （PS。我的名声还不足以评论Iceman的解决方案，并直接问他可能有什么问题-如果可以的话，我会的。）
But, when I paste the code snippets into my document, nothing happens (the resulting text isn't clickable). 但是，当我将代码段粘贴到文档中时，什么也没有发生（结果文本不可单击）。 Could some of you take a look and tell me what I'm doing wrong? 你们中的一些人可以看看我是否做错了吗？ It's very possible it's something stupid, but I can't see it myself. 这很有可能是愚蠢的，但我自己看不到。
Index.html so far: 到目前为止的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>
My test site: http://wyrdling.com/other/ukendtnavn/ 我的测试网站： http : //wyrdling.com/other/ukendtnavn/
1 个解决方案
解决方案1
3 已采纳 2018-05-03 11:11:11
You are trying to call document.getElementById("myAudio") before the element is loaded, therefore you can either call it after the page fully loaded, or place the script right before the end of body tag. 您正在尝试在元素加载之前调用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.