上下音頻和.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的值。 現在，當您單擊上/下按鈕時，音量將更新，但滑塊不會移動。

這是經過上述修改后我可以使用的代碼的JSFiddle： http : //jsfiddle.net/vcxsn6q7/

上下音頻和.currentTime HTML5 / Javascript

問題描述

1 個解決方案

解決方案1
0 已采納 2015-09-22 16:45:55

上下音頻和.currentTime HTML5 / Javascript

問題描述

1 個解決方案

解決方案1 0 已采納 2015-09-22 16:45:55

解決方案1
0 已采納 2015-09-22 16:45:55