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的主要内容,如果未能解决你的问题,请参考以下文章