gpt4 book ai didi

javascript - 播放完音频后更改CSS属性

转载 作者:行者123 更新时间:2023-12-03 01:36:19 25 4
gpt4 key购买 nike

我正在创建一个备用调音Web应用程序,该应用程序支持键盘的其他调音!无论如何,我正在尝试在音频播放完毕后更改CSS。我正在尝试创建一个检查音频是否正在播放的函数,如果没有,请更改CSS以使其没有阴影。理想情况下,在30秒钟后,音频将停止并且琴键恢复为“未按下”风格。

使用按键功能,我尝试过...

如果(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>

最佳答案

您可以使用 HTMLMediaElement.paused 属性来检查媒体是否已暂停

if (audio1.paused) {
key8.style.boxShadow = "inset 0px 0px 0px rgba(0,0,0,0)";
key8.style.textShadow = "0px 0px 0px rgba(0,0,0,.5)";
}

<!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.paused) {
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>

关于javascript - 播放完音频后更改CSS属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52706854/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com