Targetting a variable with a toggle button - jquery-mobile

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>
Play
</div>
</div>