Weird glitch on toggle only on ipad

[turpentyne]

Here's a weird one... I have a toggle for a music file that plays when the site loads. There's a stop/play button on the page as well.

On every browser, things work just fine. The music plays, the text says turn off/turn on just as it should.

Except Ipad.
When the page loads on an ipad, the song isn't playing. Yet, when I click the music off button, it turns the music on, and the text still says "turn off" - as it should when the page loads, and everything works as it should from there on. Weird. No settings have been changed on the ipad itself, so I'm stumped.

There's nothing in the css affecting these sections, so it's not a stylesheet issue.

Here's the javascript:

$(document).ready(function() {

    $('#music_control,#music_control2').click(function(){
        if (!$("#song")[0].paused)
                    {
                        $("#song")[0].pause();           
                        $("#music_control").text("MUSIC ON");
                        $("#music_control2").text("MUSIC ON");
                    } else {
                        $("#song")[0].play();           
                        $("#music_control").text("MUSIC OFF");
                        $("#music_control2").text("MUSIC OFF");
                    }
       });     
}); 

and here's the html content:

<div id="music">
    <audio id="song" autoplay loop> 
        <source src="music/12_full_prom_night_0132.ogg" type="audio/ogg" />
        <source src="    music/12_full_prom-night_0132.mp3" type="audio/mpeg" />
        Your browser does not support the audio element.
        </audio>
</div>


<a href="#" id="music_control2" class="">MUSIC OFF</a> 

[LastMitch]

On every browser, things work just fine. The music plays, the text says turn off/turn on just as it should.

Which browser? Does that included IE or Firefox? Even though it's an iPad does it work on those 2 browser since you mention every browser I'm just curious. When I test a code it's usually just Safari because it's is by default only if you want to change the broswer.

When the page loads on an ipad, the song isn't playing. Yet, when I click the music off button, it turns the music on, and the text still says "turn off" - as it should when the page loads, and everything works as it should from there on. Weird. No settings have been changed on the ipad itself, so I'm stumped.

I assume you got code from here:

http://portiaplante.com/csci202/lectures/media/audio.php

This article explain the audio tag supports:

http://www.html5tutorial.info/html5-audio.php

In the article there is this sentence:

Test how far your browser support audio tag using "HTML5 <audio> and Audio() Support Tester".

Click that link and it will tell you which browser support the <audio> tags or Audio() function.

If the page load on the iPad and the song doesn't play then it's either the format is not supported on the iPad or that tags is not support yet.

Personally, I feel it's not good to used autoplay (when the page is load and music plays) it slows down the website.