音频上下和.currentTime HTML5 / Javascript

Question

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

Answer 1

好的，重要的事先说。将您的 JavaScript 代码从 <head> 元素中取出。这打破了

var mediaClip = document.getElementbyId("mediaClip");

因为它试图在浏览器深入到那行代码并创建 DOM 元素之前寻找元素 "mediaClip" 。在 HTML 代码之后添加 JavaScript 将允许浏览器创建 DOM 元素，然后您的代码将运行.

其次，您的 JavaScript 中有一些拼写错误。您尝试使用方法 getElementbyId 两次（注意小写 b）。将这些更改为 getElementById 应该可以解决问题。

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

还有一件事：您需要在 upVolume() 和 downVolume() 中添加一些内容来更改滑块 volume1 的值。现在，当您单击 up/down 按钮时，音量会更新，但滑块不会移动。

这是我在上述修改后开始工作的代码的 JSFiddle：http://jsfiddle.net/vcxsn6q7/

音频上下和.currentTime HTML5 / Javascript

Audio up and down and .currentTime HTML5 / Javascript

html

javascript

audio

volume