我正处于学习如何编码的第一周，并且在如何将滑块连接到音量方面遇到了HTML5音频的麻烦。
我的代码在下面，如有任何建议，我们将不胜感激。我不确定的主要部分是我的setVolume()脚本；我只是难以理解。
<!DOCTYPE html>
<head>
<title>Slider + Play/Pause</title>
<script>
"use strict";
/*function playMusic() {
document.getElementById("mediaClip").play();
}*/
var mediaClip = document.getElementbyId("mediaClip");
var volume1 = document.getElementbyId("volume1");
function playPause() {
var mediaClip = document.getElementById("mediaClip");
if (mediaClip.paused) {
mediaClip.play();
} else {
mediaClip.pause();
}
}
function change() {
var button1 = document.getElementById("button1");
if (button1.value==="Play") button1.value = "Pause";
else button1.value = "Play";
}
function setVolume() {
var mediaClip = document.getElementById("mediaClip").value;
document.getElementById("mediaClip").value = mediaClip;
mediaClip.volume = document.getElementById("volume1").value;
}
</script>
</head>
<body>
<audio id="mediaClip" src="takeMeToChurchHozier.mp3" controls>
<p>Your browser does not support the audio element</p>
</audio>
<br/>
<input onclick="change();playPause()" type="button" value="Play" id="button1">
<br/>
<input type="range" onchange="setVolume()" id='volume1' min=0 max=1 step=0.01 value='1'>
</body>
</html>
最佳答案
在setVolume()函数中，将代码更改为此:
var mediaClip = document.getElementById("mediaClip");
mediaClip.volume = document.getElementById("volume1").value;
说明:
我将第一行代码从
var mediaClip = document.getElementById("mediaclip").value;更改为var mediaClip = document.getElementById("mediaClip");，因为要更改元素的属性或属性，您需要使用此语法element.property而不是element.value.property。我完全删除了第二行，因为它既没有意义，也没有必要。考虑一下，为什么将一个元素的值分配给该元素的当前值？
您的第三行(在我的代码中是第二行)保持不变。
关于javascript - 音频范围音量滑块Javascript/HTML5，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/32705989/