音频范围音量滑块 Javascript/HTML5

Question

我在学习如何编码的第一周，运行在使用 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>

Answer 1

在您的 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/HTML5

Audio range volume slider Javascript/HTML5

html

javascript

audio

slider

range