<audio> element not working at all in Safari

问题:

I'm trying to add music to a virtual tour application I'm writing in JS and jQuery and so far my code, shown below, works great in Chrome, FF, IE9, and Opera. But in Safari 5.1.7, which is the newest you can get for a Windows machine, it just doesn't work... Through my research of the problem, I know that Safari doesn't autoplay music and it has to be started manually, but when I click the play button, nothing happens. And, btw, the code inspector in Safari shows that my audio tag is there with the music sources so I don't think it has anything to do with the DOM. Any ideas on my problem?

HTML:

<div id="musicBtns">
    <p>Music:</p>
    <p id="musicPlayBtn">Play</p>
    <p>/</p>
    <p id="musicPauseBtn">Pause</p>
</div>

My music object in JS:

var Music = 
    {
        musicBtns: $('#musicBtns'),
        playBtn: $('#musicPlayBtn'),
        pauseBtn: $('#musicPauseBtn'),
        isPlaying: false,

        init: function()
        {
            if(!music.includeMusic) // If the client didn't want any music in the tour app, remove the music btns from the DOM
            {
                this.musicBtns.remove();
            }
            else // Else, setup the audio element
            {
                var parent = this;
                var audio = $('<audio loop="true">');

                if(music.autoplay) 
                {
                    audio.attr('autoplay', 'autoplay');
                    this.isPlaying = true;
                    this.togglePlayPause();
                }

                // Add a source elements and appends them to the audio element 
                this.addSource(audio, music.ogg); // 'music.ogg' is a reference to the path in a JSON file  
                this.addSource(audio, music.mp3);
                this.musicBtns.append(audio);

                // Add event listeners for the play/pause btns
                this.playBtn.click(function()
                {
                    audio.trigger('play');
                    parent.isPlaying = true;
                    parent.togglePlayPause();
                });

                this.pauseBtn.click(function()
                {
                    audio.trigger('pause');
                    parent.isPlaying = false;
                    parent.togglePlayPause();
                });
            }
        },
        addSource: function(el, path)
        {  
            el.append($('<source>').attr('src', path));  
        },
        // Add or remove classes depending on the state of play/pause
        togglePlayPause: function()
        {
            if(this.isPlaying)
            {
                this.playBtn.addClass('underline');
                this.pauseBtn.removeClass('underline');
            }
            else
            {
                this.playBtn.removeClass('underline');
                this.pauseBtn.addClass('underline');
            }
        }
    }

Edit: Could this be a bug in Safari?

回答1:

So the problem turned out to be with QuickTime. I guess I must of deleted it off of my machine awhile back because I didn't think I needed it. After I re-installed QuickTime, Safari plays music using the audio tag with no problem. Autoplay even works too.

Kinda funny how the champion of native HTML5 audio/video support, doesn't support HTML5 audio/video without a plugin...

回答2:

In HTML5 video on Safari I had an issue with this where I had to "load" (which, I think, either starts the buffer or loads the whole thing) before I set it to play. This seemed to actually make things work in a few webkit browsers. So something like:

var a = new Audio("file.mp3");
a.load();
a.play();

Worth a try