audio.play() is not a function.

Question

I am doing this Javascript (vanilla JS) 30 days challenge by http://wesbos.com. and im trying not to look at the reference code for the first challenge.

Any way, I am trying to make this code work, but i eventually get this error : " Uncaught TypeError: audElem.play is not a function "

This is my code :

function functionA( item){

  //  alert("HEYYY")
  item.classList.add("playing");

  var audElem= item.getElementsByTagName('audio') [0].getElementsByTagName('source')[0];

  var song= audElem.getAttribute('src');
  song.currentTime=0;
  song.play();
}

And this the html part:

<li class="flex-item " > A  

  <span class="flex-SubItem"> <br />  BOOM </span> 

  <audio id="boom" >
   <source src="sound-effects/boom.mp3" type="audio/mpeg">
  </audio>
</li>

I tried to figured it out but nothing. I have no one to ask but you guys. I hope i get answers. thank any way :)

Answer 1

play is a method of the <audio> object but you are calling it on a string that you get from an attribute of the <source> object.

Answer 2

For who ever is interested i finally managed to make it work by getting the id of the audio tag and call it after that. here's the code:

             function functionA( item){

             item.classList.add("playing");

            var audElem= item.getElementsByTagName('audio')[0].getAttribute('id');

             var song = document.getElementById(audElem);
             song.play();

         } 

Answer 3

I had the same problem and just fixed it using querySelector. In your case, you can replace the code below:

var audElem= item.getElementsByTagName('audio') [0].getElementsByTagName('source')[0];
var song= audElem.getAttribute('src');

with this single line here:

document.querySelector('boom').play();