Audio up and down and .currentTime HTML5 / Javascript

Question

Have an issue with some code.. I can't find anything wrong with it and appears to be identical with my other code that does work. Just the volume up and volume down and the goToChorus that i'm having trouble. Any help is appreciated!

<!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

Okay, first things first. Take your JavaScript code and get it out of the <head> element. This breaks things like

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

because it tries to look for the element "mediaClip" before the browser has even gotten down to that line of code and created that DOM element. Having the JavaScript AFTER the HTML code will allow the DOM elements to be created by the browser, then your code will run.

Second, you have a few typos in your JavaScript. Twice you try to use the method getElementbyId (notice the lower-case b ). Changing these to getElementById should fix it.

Okay, so now your code will run after DOM load, and will find the elements properly. This should allow the rest of your functions to run, since they all rely on the variable mediaClip being set properly at the beginning.

One more thing: you need to add something inside of upVolume() and downVolume() to change the value of the slider volume1 . Right now, when you click the up/down buttons the volume will update, but the slider doesn't move.

Here's a JSFiddle of your code that I got to work after the above modifications: http://jsfiddle.net/vcxsn6q7/

Audio up and down and .currentTime HTML5 / Javascript

Question

1 answers

solution1
0 ACCPTED 2015-09-22 16:45:55

Audio up and down and .currentTime HTML5 / Javascript

Question

1 answers

solution1 0 ACCPTED 2015-09-22 16:45:55

solution1
0 ACCPTED 2015-09-22 16:45:55