为广播播放器创建一个切换开始/停止按钮

Question

我正在努力为广播播放器创建一个切换按钮来播放和停止音乐，因为我不知道如何编写 javascript 代码...开发人员帮助我在服务器上安装 Icecast但不幸的是他很忙。我只有一个 HTML 可以在页面加载时自动播放音乐。

非常感谢！！这是代码：

<!DOCTYPE html>
<html lang="en">
<head>
<script src="http://radiocambodia.live/sound_manager/script/soundmanager2-jsmin.js"></script>
<script src="http://radiocambodia.live/Helpers.js"></script>
<script src="http://radiocambodia.live/WebRadio.js"></script>
<script>
        var stream_url = "http://radiocambodia.live:8000/stream.ogg";

        var radio = new WebRadio(stream_url);

        radio.init({
            onloaded: function() {
                console.log("Playing !");
                radio.soundObject.play();
            },

            onplaying: function() {

            }
        });

    </script>
</head>

<body>
<a href="#"><img src="http://radiocambodia.live/pause.png" width="45" height="45" id="stopbutton" onclick='toggleSound()';  /></a> 
<script type="text/javascript">
function toggleSound() {

    if (radio.soundObject.play){
document.getElementById('soundObject.stop').src='stop.png';
}else{
document.getElementById('soundObject.play').src='play.png';
}

</script>
</body>
</html>

Answer 1

您的 toggleSound 函数缺少右花括号，这是一个可行的解决方案

<!DOCTYPE html>
<html lang="en">
<head>
</head>

<body>
<img id="togglePlay"  src="http://radiocambodia.live/pause.png" width="45" height="45" id="stopbutton" onclick='toggleSound()';  />
<script src="http://radiocambodia.live/sound_manager/script/soundmanager2-jsmin.js"></script>
<script src="http://radiocambodia.live/Helpers.js"></script>
<script src="http://radiocambodia.live/WebRadio.js"></script>

<script type="text/javascript">
    var stream_url = "http://radiocambodia.live:8000/stream.ogg";

    var radio = new WebRadio(stream_url);

    radio.init({
        onloaded: function() {
        console.log("Playing !");
        radio.soundObject.play();
    },

    onplaying: function() {

    }
    });
    function toggleSound() {
        if (radio.soundObject.paused){
            radio.soundObject.play();
            document.getElementById('togglePlay').src='http://radiocambodia.live/pause.png';
        }else{
            radio.soundObject.pause();    
            document.getElementById('togglePlay').src='http://radiocambodia.live/play.png';         
        }
    }

</script>
</body>
</html>

radio.soundObject.paused returns 一个布尔值，这就是我用它在播放和暂停之间切换的原因。无论您使用什么 api/library，请阅读它的文档以更好地理解它。

为广播播放器创建一个切换开始/停止按钮

Create a toggle start / stop button for a radio player

javascript

css

button

radio

icecast