HTML5 音频播放器适用于 safari/Chrome,但不适用于 iPhone

Posted

技术标签:

【中文标题】HTML5 音频播放器适用于 safari/Chrome,但不适用于 iPhone【英文标题】:HTML5 Audio player works on safari/Chrome, but not iPhone 【发布时间】:2012-05-21 16:25:53 【问题描述】:

我有一个 html5 音频播放器,可以在 PC 上的 Safari 上运行,但似乎无法在(我的)iPhone (4) 上运行。代码如下:

`    
function loadPlayer() 
    var audioPlayer = new Audio();
    audioPlayer.controls="controls";
    audioPlayer.addEventListener('ended',nextSong,false);
    audioPlayer.addEventListener('error',errorFallback,true);
    document.getElementById("player").appendChild(audioPlayer);
    nextSong();

function nextSong() 
    if(urls[next]!=undefined) 
        var audioPlayer = document.getElementsByTagName('audio')[0];
        if(audioPlayer!=undefined) 
            audioPlayer.src=urls[next];
            audioPlayer.load();
            audioPlayer.play();
            next++;
         else 
            loadPlayer();
        
     else 
        alert('the end!');
    

function errorFallback() 
        nextSong();

function playPause() 
    var audioPlayer = document.getElementsByTagName('audio')[0];
    if(audioPlayer!=undefined) 
        if (audioPlayer.paused) 
            audioPlayer.play();
         else 
            audioPlayer.pause();
        
     else 
        loadPlayer();
    


    function stop() 
        var audioPlayer = document.getElementsByTagName('audio')[0];
        audioPlayer.pause();
        audioPlayer.currentTime = 0;
    


function pickSong(num) 
    next = num;
    nextSong();


var urls = new Array();
    urls[0] = '01_horses_mouth/mp3/01. Let The Dog See The Rabbit preface.mp3';
    urls[1] = '01_horses_mouth/mp3/02. The Other Horse\'s Tale.mp3';
    urls[2] = '01_horses_mouth/mp3/03. Caged Tango.mp3';
    urls[3] = '01_horses_mouth/mp3/04. Crumbs.mp3';
    urls[4] = '01_horses_mouth/mp3/05. Mood Elevator Reprise.mp3';
    urls[5] = '01_horses_mouth/mp3/06. Mood Elevator.mp3';
    urls[6] = '02_dub_project/mp3/01. Fearless Dub.mp3';
    urls[7] = '02_dub_project/mp3/02. Original Sound Dub.mp3';
    urls[8] = '02_dub_project/mp3/03. Rhok Shok Dub.mp3';
    urls[9] = '02_dub_project/mp3/04. Tron Dub.mp3';
    urls[10] = '02_dub_project/mp3/05. Eastern Fire Dub.mp3';
    urls[11] = '02_dub_project/mp3/06. Mary Jane Dub.mp3';

var next = 0;
`

任何人都可以看到任何明显的东西会导致这在 iPhone 上不起作用吗?

还有画布元素的代码,但我在 iPhone 版本上隐藏了它——无论如何都是画布。我注释掉了代码,但这似乎没有什么不同,所以我猜这不是冲突。这是网站:

http://lisadearaujo.com/clientaccess/wot-sound/indexiPad.html

【问题讨论】:

啊。我已经弄清楚了这一点。在我的桌面版本中,我隐藏了播放器,因为我没有使用默认播放器元素(我只需要播放列表和播放/暂停/停止按钮)。这适用于隐藏 div 中的玩家。但是,在 iPhone 上,必须显示 div。我要么必须弄清楚如何重新设计它以适应它,要么以其他方式隐藏它,但至少它确实有效。 【参考方案1】:

在我的浏览器版本中,我隐藏了默认音频播放器,以便可以使用自定义控件。这适用于隐藏 div 中的玩家。然而,在 iPhone 上,div 必须显示才能正常工作,即使使用自定义控件(或者它看起来如此)也是如此。

我用低 z-index 隐藏了 div,而不是 display:none。

【讨论】:

【参考方案2】:

iPhone 上的 HTML5 音频播放器需要用户点击。

点击播放器时工作:

<audio src="foo.ogg"   />

【讨论】:

以上是关于HTML5 音频播放器适用于 safari/Chrome,但不适用于 iPhone的主要内容,如果未能解决你的问题,请参考以下文章

HTML5 和 JavaScript 中每个音频播放器的音量滑块

HTML5 音频“触发播放”在 iPad 上不起作用

HTML5 音频加载和播放无法在 iPad 上运行

如何禁用音频(流)html5元素的自动播放

为啥 HTML5 音频标签在 iOS 上显示错误?

在移动浏览器上流式传输/播放音频文件