＆LT;音频＆GT;元素在Safari中不工作 [英] <audio> element not working at all in Safari

问题描述

我想要的音乐添加到虚拟旅游应用程序，我正在写在JS和jQuery，到目前为止，我的code，如下图所示，在Chrome，FF，IE9和Opera的伟大工程。但在Safari 5.1.7，这是你可以得到一个Windows机器，它只是不工作......通过我的问题研究的最新的，我知道，Safari不自动播放音乐，它必须开始手动，但是当我点击播放按钮，没有任何反应。而且，顺便说一句，在Safari中的code检查显示，我的音乐标签是没有用的音乐来源，所以我不认为这有什么做的DOM。我的问题的任何想法？

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>

在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');
            }
        }
    }

编辑：难道这是在Safari中的错误

Could this be a bug in Safari?

推荐答案

所以，问题竟然是用QuickTime。我想我必须在删除它关闭我的机器一段时间回来，因为我不认为我需要它。我在重新安装了QuickTime，Safari浏览器使用没有问题的音频标签播放音乐。自动播放甚至可以了。

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.

还挺有趣如何本地HTML5视频/音频的支持，冠军不支持HTML5音频/视频无需插件...

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

这篇关于＆LT;音频＆GT;元素在Safari中不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！