Javascript audio play/stop

Question

still having problems - if I get my code to play the selected audio the buttons won't toggle. If I include $(document).ready(function(){ then the button toggles but the audio won't play! Can anyone save the little hair I have left? This is an HTML5 jQuery Mobile project for delivery on iOS 5

Thanks for any/all help J

code:

$(document).ready(function(){
var selSound = '18000'; //default to first sound.
var play = false; //default to paused.

function selectSound(id) {
    selSound = id;
}

$('#playbtn').click(function() {
     var $this = $(this);
var a = document.getElementById(selSound);   
     if($this.text() == 'Zap!') {
    $this.children().children().text('Stop');
    a.play();
} else {
    $this.children().children().text('Zap!');
     a.pause();
    alert('Stopped playing song: '+selectedMP3);



}

});

})

html:

<div data-role="fieldcontain">       
        <fieldset data-role="controlgroup" >
                    <li data-swatch="b" class="ui-li ui-li-divider ui-btn ui-bar-a ui-corner-top" data-role="list-divider" role="" data-form="ui-bar-b">Select a frequency</li>

    <input type="radio" name="mp3_option" id="selectSound('16000')" onclick="selectSound('16000')"><label for="selectSound('16000')">16Hz</label>

    <input type="radio" name="mp3_option" id="selectSound('18000')" onclick="selectSound('18000')"><label for="selectSound('18000')">18Hz</label>

    <input type="radio" name="mp3_option" id="selectSound('20000')"    onclick="selectSound('20000')"><label for="selectSound('20000')">20Hz</label>
</fieldset>
<div style="text-align:center"><a href="#" data-role="button" data-inline="true"   id="playbtn">Zap!</a></div></div>

You should move `function selectSound(id)` outside of the `$(document).ready(function() {});` — PeeHaa, Mar 06 '12 at 16:52
I would start solving your issue by changing the value of the id attribute. By the looks of your javascript you're selecting an id (selSound = '18000') that is not valid. Also see http://stackoverflow.com/questions/70579/what-are-valid-values-for-the-id-attribute-in-html — T. Junghans, Mar 06 '12 at 17:04

score 1 · Accepted Answer · answered Mar 06 '12 at 16:54

1

Okay, a bit of an assumption here, but I'm thinking it's a scope issue. You need to declare the variables and function outside the document ready handler, but attach the button events inside it...

var selSound = '18000'; //default to first sound.
var play = false; //default to paused.

function selectSound(id) {
    selSound = id;
}

$(document).ready(function(){
    $('#playbtn').click(function() {
        var $this = $(this);
        var a = document.getElementById(selSound);   
        if ($this.text() == 'Zap!') {
            $this.children().children().text('Stop');
            a.play();
        } else {
            $this.children().children().text('Zap!');
            a.pause();
            alert('Stopped playing song: ' + selectedMP3);
        }
    });
})

answered Mar 06 '12 at 16:54

Reinstate Monica Cellio

25,975
6
51
67

It's not a scope issue. Both **selSound** and **play** are outside of **selectSound** and the click-event handler. I would actually keep the javascript as it is in the question. – T. Junghans Mar 06 '12 at 17:06
The scope I was talking about is the document ready event. Both vars are declared in there in the example so they don't exist globally. That's what my code fixes. – Reinstate Monica Cellio Mar 06 '12 at 17:08
Thank you so much for your time - that's perfect. - Jim – Jimbly2 Mar 06 '12 at 17:08
I'm not sure where **selSound** and **play** are needed outside document ready. Am I missing something? – T. Junghans Mar 06 '12 at 17:10
We've not got the whole script here, and like I said it was an assumption from the way he'd worded the question. It was clearly a scope issue. – Reinstate Monica Cellio Mar 06 '12 at 17:21

Javascript audio play/stop

1 Answers1