【发布时间】：2018-10-09 01:11:22
【问题描述】：
我正在创建一个支持键盘替代调音的替代调音网络应用程序！无论如何，我正在尝试让 CSS 在音频播放完毕后进行更改。我正在尝试创建一个函数来检查音频是否正在播放，如果没有，则将 CSS 更改为没有阴影。理想情况下，30 秒后，音频停止，按键返回“未按下”样式。
用keylight功能，我试过了……
如果 (audio1.currentTime == 29) {
如果（audio1.currentTime == 30）{
如果 (audio1.currentTime == 0) {
如果（audio1.playing）{
在完整的代码中，我有十二个键，但这里是其中之一：
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color:black;}
#play432 {
background-color:#ff4b00;
}
.key {
color:white;
border-radius: 5px;
border:1px solid white;
padding: 15px;
margin: -1px 75% 0% 0%;
text-align: center;
transition: all .1s;
}
</style>
<script>
function play432() {
var audio = document.getElementById('audioA');
var key = document.getElementById("play432");
if (audio.paused) {
audio.play();
key.style.boxShadow = "inset 3px 3px 5px rgba(0,0,0,.5)";
key.style.textShadow = "3px 3px 5px rgba(0,0,0,.5)";
}
else {
audio.pause();
audio.currentTime = 0;
key.style.boxShadow = "inset 0px 0px 0px rgba(0,0,0,0)";
key.style.textShadow = "0px 0px 0px rgba(0,0,0,.5)";
}
}
function keylight () {
var audio1 = document.getElementById('audioA');
var key8 = document.getElementById('play432');
if (audio1.currentTime == 0) {
key8.style.boxShadow = "inset 0px 0px 0px rgba(0,0,0,0)";
key8.style.textShadow = "0px 0px 0px rgba(0,0,0,.5)";
}
else{
key8.style.boxShadow = "inset 3px 3px 5px rgba(0,0,0,.5)";
key8.style.textShadow = "3px 3px 5px rgba(0,0,0,.5)";
}
}
</script>
</head>
<body onload="setInterval(keylight(),1000)">
<h3 style="color:white;">Perfect 5th Interval Scale</h3>
<audio src="https://webdevgeometrics.com/wp-content/uploads/2018/09/432hz.ogg" id="audioA"></audio>
<div id="play432" onclick="play432()" class="key">A 432 Hz</div>
</body>
</html>【问题讨论】：
-
只需使用
ended事件。 -
@ScottMarcus 结束事件仅在音频结束时触发
fully，而不是在暂停时触发 -
@PlatinumIndustries OP 声明：我正在尝试在音频播放完毕时更改 CSS。 对我来说，这意味着当它完全结束时。跨度>
-
@ScottMarcus :-) 添加 - 我正在尝试创建一个函数来检查音频是否正在播放，如果没有，请将 CSS 更改为没有阴影 - 在它变成结束 + 暂停？只是说...
-
@PlatinumIndustries 我看不出暂停是如何添加到组合中的。但是，这就是我添加评论而不是答案的原因。
标签： javascript audio