Question

I have got my HTML5 project a bit further along – I have one last stumbling block which is: I have set a variable and have three buttons which give it a different value – each value should relate to a different mp3 file, I want my big ‘play’ button to play whichever mp3 ( variable) has been selected. I then want the button to toggle off or stop playing when clicked again.

I’m out of my depth a bit ( on tip toes) so any help/advice would be appreciated. I have gone through the Jquery and html5 audio notes but can’t find anything too helpful ( that I can understand anyway!)

Thanks for any help,

Jim

Answer 1

Live Demo:

• http://jsfiddle.net/CZLcR/29/

JS

var selectedMP3;

$('input[name=mp3_option]').change(function() {
    selectedMP3 = $('input[name=mp3_option]:checked').val(); 
});

$('#controlButton').click(function() {
    var $this = $(this);

    if($this.text() == 'Play') {
        $this.children().children().text('Pause');
    } else {
        $this.children().children().text('Play');
        alert('Stopped playing song: '+selectedMP3);
        $('input[name=mp3_option]').attr('checked',false).checkboxradio('refresh');
    }
});

HTML

<div data-role="page" id="home">
    <div data-role="content">
        <div data-role="fieldcontain">
    <fieldset data-role="controlgroup">
        <legend>Choose a song:</legend>
             <input type="radio" name="mp3_option" id="radio-choice-1" value="song-1.mp3" />
             <label for="radio-choice-1">MP3 1</label>

             <input type="radio" name="mp3_option" id="radio-choice-2" value="song-2.mp3"  />
             <label for="radio-choice-2">MP3 2</label>

             <input type="radio" name="mp3_option" id="radio-choice-3" value="song-3.mp3"  />
             <label for="radio-choice-3">MP3 3</label>

             <input type="radio" name="mp3_option" id="radio-choice-4" value="song-4.mp3"  />
             <label for="radio-choice-4">MP3 4</label>
    </fieldset>
</div>


        <a href="#" data-role="button" data-inline="true" id="controlButton">Play</a>
    </div>
</div>