javascript - audio.play() is not a function. - Stack Overflow

admin管理员组

文章数量:1220795

I am doing this Javascript (vanilla JS) 30 days challenge by . 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 :)

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

• javascript
• html

Share Improve this question Follow edited Jan 20, 2017 at 15:52 mplungjan 178k2828 gold badges180180 silver badges240240 bronze badges asked Jan 20, 2017 at 15:49 olfa Dhaouadiolfa Dhaouadi 10911 gold badge11 silver badge44 bronze badges

Add a comment  | 

4 Answers 4

Sorted by: Reset to default 8

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.

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

         } 

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

You should call play() on the audio element.

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

https://jsfiddle.net/g5d0a6Lg/

本文标签： javascriptaudioplay() is not a functionStack Overflow