[英]Audio mute-unmute icon
我想做一個可以讓你靜音或取消靜音的圖標。 圖標本身有效,但無法播放音頻。 這是代碼:
<audio id="myaudio" controls loop>
<source src="https://www.w3schools.com/jsref/horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3f/Mute_Icon.svg/1200px-Mute_Icon.svg.png"
style="height: 80px; width: 80px" id="imgClickAndChange" onclick="changeImage()" />
</p>
<script language="javascript">
function changeImage() {
var x = document.getElementById("myAudio");
if (document.getElementById("imgClickAndChange").src == "https://www.iconfinder.com/data/icons/octicons/1024/unmute-512.png")
{
document.getElementById("imgClickAndChange").src = "https://upload.wikimedia.org/wikipedia/commons/thumb/3/3f/Mute_Icon.svg/1200px-Mute_Icon.svg.png";
x.play();
}
else
{
document.getElementById("imgClickAndChange").src = "https://www.iconfinder.com/data/icons/octicons/1024/unmute-512.png";
x.pause();
}
}
</script>
誰能幫我?
(也是的,我正在使用 w3schools 的聲音)
x.muted 是解決方案:
function changeImage() { var x = document.getElementById("myaudio"); if ( document.getElementById("imgClickAndChange").src == "https://www.iconfinder.com/data/icons/octicons/1024/unmute-512.png" ) { document.getElementById("imgClickAndChange").src = "https://upload.wikimedia.org/wikipedia/commons/thumb/3/3f/Mute_Icon.svg/1200px-Mute_Icon.svg.png"; x.muted = true; } else { document.getElementById("imgClickAndChange").src = "https://www.iconfinder.com/data/icons/octicons/1024/unmute-512.png"; x.muted = false; } }
<audio id="myaudio" controls loop> <source src="https://www.w3schools.com/jsref/horse.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio> <img src="https://www.iconfinder.com/data/icons/octicons/1024/unmute-512.png" style="height: 80px; width: 80px" id="imgClickAndChange" onclick="changeImage()" /> </p>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.