javascript – Autoplay at zero volume with custom audio slider-ThrowExceptions

Exception or error:

I’m trying to create a simple audio slider that auto-plays at zero volume when you open the browser and then allows you to increase the volume with the slider.

I’ve managed to get the slider working, but I can’t figure out how to get the audio to autoplay. Any help would be much appreciated, thanks.

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


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;
}



document.getElementById('mediaClip').play();
<audio id="mediaClip" src="A Very Brady Special.mp3" style="display:none" allow="autoplay" controls>
    <p>Your browser does not support the audio element</p>
</audio>

<input type="range" onchange="setVolume()" id='volume1' min=0 max=1 step=0.01 value='0'>
How to solve:

First, you’ve written

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

Running this and viewing the output from the Javascript console, you’ll see an error like

document.getElementbyId is not a function

The correct function name, which you’ve used elsewhere in your code, is getElementById, with the ‘B’ capitalized.


After fixing this, we have a new error:

Cannot read property 'play' of null

This is coming from the line

document.getElementById('mediaClip').play();

So getElementById has returned null here, indicating it was unable to find this element. The problem here is (in my layman’s understanding; browser experts feel free to jump in) that your javascript code has started running before the browser has finished building the document. We don’t want that, so let’s make sure our code runs at the appropriate time:

var mediaClip;
var volume1;

function init()
{
    mediaClip = document.getElementById("mediaClip");
    volume1 = document.getElementById("volume1");

    mediaClip.play();
}

and in the HTML:

 <body onload="init()">
  <audio id="mediaClip" src="A Very Brady Special.mp3"  style="display:none" allow="autoplay" controls>
    <p>Your browser does not support the audio element</p>
  </audio>

  <input type="range" onchange="setVolume()" id='volume1' min=0 max=1 step=0.01 value='0'>
 </body>

And now we have another new error in the Javascript console:

play() failed because the user didn't interact with the document first.

This is a constraint added by the browser to prevent sites from bugging users with autoplaying ads or annoying music. In your case you’ll need to add code that only starts the music once the user interacts with the volume slider.

However, since you haven’t included the code for “button1” here, I can’t tell you exactly how to fix this in your particular document.

Leave a Reply

Your email address will not be published. Required fields are marked *