作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我以前从未真正使用过 javascript,但我尝试在谷歌上搜索如何为音频制作播放/暂停按钮的解决方案 - 我在该站点上发现了一个看起来不错且简单的解决方案: How to toggle audio play() pause() with one button or link?(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>
最佳答案
您尝试在加载元素之前调用 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>
关于javascript - 如何一键切换音频播放/暂停,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50153471/
我是一名优秀的程序员,十分优秀!