Home/ Questions/Q 7418995
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-29T07:59:02+00:00

I wonder if someone could give me a steer here – my mind is

  • 0

I wonder if someone could give me a steer here – my mind is blank. On my page I have 3 buttons each for three different sounds (using JavaScript). What I’m trying to do is have these three buttons, then a button that plays the selected sound – and if clicked again, stops it.

I could do it in Flash but I’m a bit stumped in HTML5!

Update

Hi Guys – thanks for the responses.. this is what I’m using so far:

<div data-role="controlgroup" data-type="horizontal">
    <audio loop id="8000">
        <source src="8000.mp3">
    </audio>
    <button onclick="document.getElementById('8000').play()">16kHz</button>
    <audio loop id="18000">
        <source src="18000.mp3">
    </audio>
    <button onclick="document.getElementById('18000').play()">18kHz</button>
    <audio loop id="20000">
        <source src="20000.mp3">
    </audio>
    <button onclick="document.getElementById('18000').play()">20kHz</button>
</div>
<div data-role="controlgroup" data-type="horizontal">
    <button class="ui-body-b" onclick="document.getElementById('8000').pause(); document.getElementById('8000').currentTime = 0;" >Stop Playing</button>

This works to a point but I want to have the buttons select the sound to be played ( not actually play it) then have a big Play sound button…

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    It looks to me like your issue is not really related to audio but instead how to implement the buttons to get the effect you want. You say the code you posted works, so play and pause are working fine on your audio element. But the 3 buttons are starting the 3 different sounds and the last button stops any sound currently being played, whereas you want to select a sound with one of the 3 buttons and play/pause the selected one using the last button.

    If you have a variable to store the id of the last clicked sound select buttons, then use the last button to toggle between calling play() and pause()…

    <!DOCTYPE html>
<html>
<header>
<script type="text/javascript">
    var selSound = 8000; //default to first sound.
    var play = false; //default to paused.

    function selectSound(id) {
        selSound = id;
    }

    function togglePlay() {
        var a = document.getElementById(selSound);
        var b = document.getElementById("playbtn");
        play = !play;
        if (play) {
            b.value = "Stop Playing";
            a.play();
        }
        else {
            b.value = "Start Playing";
            a.pause();
        }
    }
</script>
</header>
<body>
    <div data-role="controlgroup" data-type="horizontal">
        <audio loop id="8000">
            <source src="8000.mp3">
        </audio>
        <button onclick="selectSound('8000')">16kHz</button>
        <audio loop id="18000">
            <source src="18000.mp3">
        </audio>
        <button onclick="selectSound('18000')">18kHz</button>
        <audio loop id="20000">
            <source src="20000.mp3">
        </audio>
        <button onclick="selectSound('18000')">20kHz</button>
    </div>
    <div data-role="controlgroup" data-type="horizontal">
          <button id="playbtn" class="ui-body-b" onclick="togglePlay()" >Start Playing</button>
    </div>
</body>
</html>

    Here the first 3 buttons simply set variable selSound to be either ‘8000’, ‘18000’ or ‘20000’, then when you press the last button to play the sound the selsound variable is used to identify the id of the audio element it will use. To begin with the first click will play a sound and the next click will stop it, and it will continue to toggle back and forth.

    This isn’t complete though and I’ve not tested it so it might not even work fully. But you will probably want the play/pause button to toggle back to ‘Start Playing’ once a sound has finished playing. Otherwise you’ll click play, the selected sound will play and finally stop, but the button will still show ‘Stop Playing’, then when you click it it will toggle to say ‘Start Playing’ and then you’ll have to click it again to start a sample playing again. So you will probably want to trap the event when a sound stops and toggle the button back to ‘Start Playing’.

    HTH

    • 0