使用JavaScript为audio元素添加播放/停止按钮功能异常求助

问题原因 #

• 你两次给window.onload赋值，后者会直接覆盖前者的逻辑，所以第一次绑定的停止按钮点击事件完全不会执行
• HTML Audio元素没有start()方法，控制播放的原生方法是play()

修正方案 #

把两个按钮的事件绑定合并到同一个window.onload回调中，同时替换错误的播放方法，完整代码如下：

<head>
    <script type="text/javascript">
    window.onload = function() {
        // 绑定停止按钮事件
        var stopBtn = document.getElementById("audiostop");
        stopBtn.onclick = function() {
            var player = document.getElementById('radio');
            player.pause();
            console.log("Pressed Stop");
            return false;
        }
        // 绑定播放按钮事件
        var startBtn = document.getElementById("audiostart");
        startBtn.onclick = function() {
            var player = document.getElementById('radio');
            player.play();
            console.log("Pressed Start");
            return false;
        }
    }
    </script> 
</head>

<body>    
    &nbsp; <a id="audiostop" class="fa fa-stop" style="color: #ed1a42;"></a>
    &nbsp; <a id="audiostart" class="fa fa-play" style="color: #ed1a42;"></a>

    <audio controls id="radio" autoplay loop height="" width="">
        <source src="<?php echo $player_stream; ?>" type="audio/mpeg">
    </audio>
</body>

你原来单独添加的第二个script块可以直接删除，所有逻辑整合到同一个onload回调中即可正常触发两个按钮的点击事件。

内容的提问来源于stack exchange，提问作者omega1