某些代码存在问题..我找不到它的任何问题，并且似乎与我的其他有效代码相同。只是音量调高和音量调低以及 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/