CODEWITHSUNDEEP
javascripthtml
olfa Dhaouadi
olfa Dhaouadi

Reputation: 109

audio.play() is not a function.

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 :)

Upvotes: 6

Views: 22904

Answers (4)

aguiarroney
aguiarroney

Reputation: 121

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();

Upvotes: 1

olfa Dhaouadi
olfa Dhaouadi

Reputation: 109

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();

         }

Upvotes: 4

Stefano Cerelli
Stefano Cerelli

Reputation: 31

You should call play() on the audio element.

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

https://jsfiddle.net/g5d0a6Lg/

Upvotes: 0

Quentin
Quentin

Reputation: 943510

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.

Upvotes: 8

Related Questions