-2

I'm struggling to create a toggle button for radio player that plays and stops music as I don't know how to write javascript code... A developer helps me to install Icecast on a server but unfortunately he's very busy. All I have is an HTML that play automatically the music when the page is loaded.

Many thanks!! Here's the code:

<!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>
Jonas
  • 121,568
  • 97
  • 310
  • 388
snowblood
  • 7
  • 2

1 Answers1

1

Your toggleSound function missing a closing curly brace, Here is a working solution 

<!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 a boolean value that's why I used it to toggle between play and pause. Whatever api/library you are using read it's documentation to understand it better.

azs06
  • 3,467
  • 2
  • 21
  • 26