gpt4 book ai didi

javascript - 音频范围音量 slider Javascript/HTML5

转载 作者:行者123 更新时间:2023-12-03 08:50:13 27 4
gpt4 key购买 nike

我正处于学习如何编码的第一周,但在使用 HTML5 音频时遇到了一些关于如何将 slider 连接到音量的问题。

我的代码如下,如有任何建议,我们将不胜感激。我不确定的主要部分是我的 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 - 音频范围音量 slider Javascript/HTML5,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32705989/

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