My audio does not play when I click on the play button

Question

This is how my script looks like:

<script>
    var obj = document.createElement("audio");
    document.body.appendChild(obj);
    obj.src = "http://example.com/audios/Kalimba.mp3";
    obj.load();
    obj.volume = 0.3;
    obj.preLoad = true;
    obj.controls = true;

    $(".testspeech").click(function() {
    obj.paused?obj.play():obj.pause()
    });
</script>

Then in the HTML I have a button that is meant to play and/or pause the video.

However, when I load the page nothing happens when I click on the play button.

Anything I could have possibly done wrong here?

Here is the HTML:

<button class="testspeech">
            play/pause
</button>

Your code works just fine for me, did you remember to include jquery?, try it here https://jsfiddle.net/L9n3afrd/ — Carsten Løvbo Andersen, Jun 03 '19 at 07:24
Try to do a $(document).ready(function(){}); and add the "document.body.appendChild(obj);" into it. There is a console error with appendChild for me. And try to add the click event into it as well. — DiabloSteve, Jun 03 '19 at 07:47
It was the jquery indeed. The code was running before jquery loaded. — Sidney Sousa, Jun 03 '19 at 16:20

score 2 · Answer 1 · answered Jun 03 '19 at 07:36

As far as I can tell the reason your sound isn't playing is that the src for the actual sound is not valid. I've created a JSFiddle (here) to test it out, and after replacing the sound clip link it works as expected.

$(document).ready(function() {
  var obj = document.createElement("audio");
  document.body.appendChild(obj);

  obj.src = "https://www.kozco.com/tech/piano2.wav";
  obj.load();
  obj.volume = 0.3;
  obj.preLoad = true;
  obj.controls = true;

  $(".testspeech").on('click', function() {
      obj.paused ? obj.play() : obj.pause()
    });
});

My audio does not play when I click on the play button

1 Answers1