元素在Safari中不工作(<audio> element not working at

2019-07-21 09:08发布

我想要的音乐添加到虚拟旅游应用程序,我正在写在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?

Answer 1:

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

有点滑稽的是如何HTML5原生音频/视频支持的冠军,不支持HTML5音频/视频无需插件...



Answer 2:

在Safari上HTML5视频我有这个问题,我不得不“负荷”(我认为它,要么启动缓冲或加载整个事情)之前,我将其设置为播放。 这似乎确实使事情在几个WebKit浏览器工作。 因此,像:

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

值得一试



文章来源: