audio.play() 不是函数。

Question

我正在通过http://wesbos.com进行这个 Javascript (vanilla JS) 30 天挑战。 我尽量不看第一个挑战的参考代码。

无论如何，我试图让这段代码工作，但我最终得到这个错误：“未捕获的类型错误：audElem.play 不是函数”

这是我的代码：

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

这是 html 部分：

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

我试图弄清楚，但什么也没有。 除了你们，我没有人要问。 我希望我能得到答案。 感谢任何方式:)

Answer 1

play是<audio>对象的一种方法，但您正在从<source>对象的属性中获取的字符串上调用它。

Answer 2

对于有兴趣的人，我终于设法通过获取音频标签的 id 并在此之后调用它来使其工作。 这是代码：

             function functionA( item){

             item.classList.add("playing");

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

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

         } 

Answer 3

您应该在音频元素上调用play() 。

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

https://jsfiddle.net/g5d0a6Lg/

Answer 4

我遇到了同样的问题，只是使用 querySelector 修复了它。 在您的情况下，您可以替换以下代码：

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

在这里使用这一行：

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