2

我正在尝试将音乐添加到我正在用 JS 和 jQuery 编写的虚拟旅游应用程序中，到目前为止，我的代码（如下所示）在 Chrome、FF、IE9 和 Opera 中运行良好。但是在 Safari 5.1.7 中，这是您可以在 Windows 机器上获得的最新版本，它只是无法正常工作......通过我对问题的研究，我知道 Safari 不会自动播放音乐，它必须启动手动，但是当我单击播放按钮时，什么也没有发生。而且，顺便说一句，Safari 中的代码检查器显示我的音频标签与音乐源一起存在，所以我认为它与 DOM 没有任何关系。对我的问题有任何想法吗？

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 中的错误吗？

4

2 回答 2

1

所以问题出在 QuickTime 上。我想我必须不久前从我的机器上删除它，因为我认为我不需要它。重新安装 QuickTime 后，Safari 使用音频标签播放音乐没有问题。自动播放甚至也有效。

有点有趣的是，原生 HTML5 音频/视频支持的冠军，不支持没有插件的 HTML5 音频/视频......

于 2013-03-13T10:33:39.760 回答
0

在 Safari 上的 HTML5 视频中，我遇到了一个问题，我必须在设置播放之前“加载”（我认为，要么启动缓冲区，要么加载整个内容）。这似乎实际上使事情在一些 webkit 浏览器中工作。所以像：

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

值得一试

于 2013-03-12T09:21:15.623 回答