使用 jQuery/Javascript 播放歌曲答案

【问题标题】：Playing a song using jQuery/Javascript使用 jQuery/Javascript 播放歌曲
【发布时间】：2017-11-11 22:24:03
【问题描述】：

当文件收到来自 Arduino 的 'playMusic' 事件时，我正在尝试播放歌曲，但我收到了 Uncaught TypeError: Cannot read property 'play' of undefined at EventSource.<anonymous>。我已经读到这可能是因为在歌曲文件准备好之前尝试播放音频，但是在事件侦听器中结合 window.onload 函数不会导致任何事情发生。我在调用事件之前添加了两秒的延迟，以尝试补偿足够的时间来加载歌曲文件，但我仍然遇到同样的错误。

<html>
    <title>Song Time</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>

    <body>
        <audio id="song">
            <source src="song.mp3" type="audio/mpeg">
        </audio>

         <script type="text/javascript">
           var eventSource = new EventSource("https://api.particle.io/v1/devices/2d0024001047363330363431/events/?access_token=bdde583943e53ea709aa421a2e618d024700b2f1");

           eventSource.addEventListener('playMusic', function(e) {
                //window.onload=function() {
                    console.log("here");
                    $('song')[0].play();
                //}

           });
        </script>
    </body>
</html>

Uncaught TypeError: Cannot read property 'play' of undefined
    at EventSource.<anonymous

【问题讨论】：

$(‘#song’)你忘了#
你的 api 暂时不工作

标签： javascript jquery html events audio

【解决方案1】：

这个函数似乎是 jQuery 问题，函数 play 在纯 js 中运行良好。这是sn-p：

document.getElementById("play").addEventListener('click', function(e) {
  console.log("play");
  document.getElementById("song").play();

});

document.getElementById("stop").addEventListener('click', function(e) {
  console.log("stop");
  document.getElementById("song").pause();
  document.getElementById("song").currentTime = 0;

});

document.getElementById("pause").addEventListener('click', function(e) {
  console.log("stop");
  document.getElementById("song").pause();

});

<html>
<title>Song Time</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>

<body>
  <audio id="song">
            <source src="http://www.cedarhome.org/mp3/songs/01%20Battlecry.mp3" type="audio/mpeg">
  </audio>
  <br />
  <input type="button" value="play" id="play" /><br />
  <input type="button" value="pause" id="pause" /><br />
  <input type="button" value="stop" id="stop" /><br />
</body>

</html>

【讨论】：

【解决方案2】：

感谢@James

$('#song') 你忘了#——詹姆斯

【讨论】：