[ HTML5 Audio player works on safari/Chrome, but not iPhone ]
I've got an HTML5 audio player that works on Safari on the PC, but doesn't seem to work on (my) iPhone (4). Here's the code:
`
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;
`
Can anyone see anything obvious that would make this not work on iPhone?
There's also code for a canvas element, but I've hidden that on the iPhone version - the canvas at any rate. I commented out the code but that didn't seem to make a difference, so I'm guessing it's not a conflict. Here's the site:
http://lisadearaujo.com/clientaccess/wot-sound/indexiPad.html
Answer 1
On my browser versions, I have hidden the default audio player so I could use custom controls. This worked fine with the player in a hidden div. On the iPhone, however, the div has to display in order to function, even with custom controls (or so it appears).
I hid the div with a low z-index rather than with display:none.
Answer 2
The HTML5 audio player on iPhone require the click of the user.
Work when you click on the player:
<audio src="foo.ogg" width="200px" height="200px" />