gpt4 book ai didi

javascript - 音频上下播放和 .currentTime HTML5/Javascript

转载 作者:行者123 更新时间:2023-11-28 06:53:59 25 4
gpt4 key购买 nike

某些代码存在问题..我找不到它的任何问题,并且似乎与我的其他有效代码相同。只是音量调高和音量调低以及 goToChorus 遇到了麻烦。如有任何帮助,我们将不胜感激!

<!DOCTYPE html>
<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").value;

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");
mediaClip.volume = document.getElementById("volume1").value;

}
function backStart() {
document.getElementById("mediaClip").currentTime = 0;
}

function upVolume() {
if (mediaClip.volume < 1)
{
mediaClip.volume += 0.1;
}

}

function downVolume() {
if (mediaClip.volume > 0)
{
mediaClip.volume -= 0.1;
}
}

function goToChorus() {
mediaClip.currenTime = 55;
}
</script>


</head>
<body onload="init()">
<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">
<input type="range" onchange="setVolume()" id='volume1' min=0 max=1 step=0.01 value='1'/>
<br/>
<button onclick ="backStart()">Reset</button>
<br/>
<button onclick="upVolume()">Volume up 10%</button>
<button onclick="downVolume()">Volume down 10%</button>
<br/>
<input type="button" value="Click for chorus" onclick="goToChorus()">
</body>
</html>

最佳答案

好的,首先要说的就是第一件事。获取您的 JavaScript 代码并将其从 <head> 中取出元素。这会破坏诸如

之类的事情
var mediaClip = document.getElementbyId("mediaClip");

因为它会尝试在浏览器执行该代码行并创建该 DOM 元素之前查找元素“mediaClip”。在 HTML 代码之后添加 JavaScript 将允许浏览器创建 DOM 元素,然后您的代码将运行。

其次,您的 JavaScript 中有一些拼写错误。您两次尝试使用方法 getElementbyId (注意小写 b )。将这些更改为 getElementById应该修复它。

好的,现在您的代码将在 DOM 加载后运行,并将正确找到元素。这应该允许其余函数运行,因为它们都依赖于变量 mediaClip一开始就设置正确。

还有一件事:您需要在 upVolume() 中添加一些内容和downVolume()更改 slider 的值 volume1 。现在,当您单击向上/向下按钮时,音量将会更新,但 slider 不会移动。

这是您的代码的 JSFiddle,经过上述修改后我可以使用它: http://jsfiddle.net/vcxsn6q7/

关于javascript - 音频上下播放和 .currentTime HTML5/Javascript,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32721242/

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