在音频元素的 javascript 中添加 stop/play 按钮

Question

我正在尝试为 javascript 中的音频元素添加一个停止和播放按钮，如下所示。

就目前而言，音频会在设置了自动播放的页面加载时自动启动，我希望能够使用停止图标停止流，然后使用播放图标再次启动它。

使用下面的代码，我可以让音频流按预期自动启动，并且停止图标也能正常工作，但如果我添加代码来尝试让流再次启动，它将不起作用。检查控制台，它似乎根本无法识别停止按钮，只能识别播放按钮（当我添加播放图标时）。

<head>
    <script type="text/javascript">
    window.onload = function() {
        var a = document.getElementById("audiostop");
        a.onclick = function() {
            var player = document.getElementById('radio');
            player.pause();
            console.log("Pressed Stop");
            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 type="text/javascript">
    window.onload = function() {
        var a = document.getElementById("audiostart");
        a.onclick = function() {
            var player = document.getElementById('radio');
            player.start();
            console.log("Pressed Start");
            return false;
            }
        }
    </script>

然后只有 'play' 图标在控制台中注册为工作，'stop' 停止工作。

我对Javascript不太熟悉，谁能帮帮我？

谢谢。

Answer 1

在一个脚本标签中，如果你尝试这个会发生什么？

window.onload = function () {
  var player = document.getElementById("radio");
  var start = document.getElementById("audiostart");
  var stop = document.getElementById("audiostop");

  start.onclick = function () {
    player.play();
    console.log("Pressed Start");
  };

  stop.onclick = function () {
    player.pause();
    console.log("Pressed Stop");
  };
};

在音频元素的 javascript 中添加 stop/play 按钮

Adding stop/play buttons in javascript for audio element

javascript

html5-audio