HTML5 오디오 플레이어는 Safari/Chrome에서 작동하지만 iPhone은 작동하지 않습니다.

PC에서 Safari에서 작동하는 HTML5 오디오 플레이어가 있지만 (내) iPhone (4)에서는 작동하지 않습니다. 코드는 다음과 같습니다.HTML5 오디오 플레이어는 Safari/Chrome에서 작동하지만 iPhone은 작동하지 않습니다.

`  
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에서 작동하지 않는 것을 볼 수 있습니까?

캔버스 요소에 대한 코드도 있지만 아이폰 버전에서는 그 캔버스를 숨겨 놨습니다. 코드를 주석 처리했지만 차이가없는 것처럼 보였으므로 충돌이 아닌 것으로 추측합니다. 여기 사이트는 다음과 같습니다 아이폰에

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

출처

2012-05-21 yolise

아. 나는 이것을 알아 냈다. 내 데스크톱 버전에서는 기본 플레이어 요소 (재생 목록과 재생/일시 중지/중지 버튼이 필요함)를 사용하지 않았기 때문에 플레이어를 숨겨 놨습니다. 이것은 숨겨진 div에서 플레이어와 잘 동작했습니다. 그러나 iPhone에서는 div가 표시되어야합니다. 나는 그것을 맞게 스타일을 바꾸거나 다른 방법으로 숨기는 방법을 찾아야하지만 적어도 작동하지는 않습니다. – yolise

, 나는 기본 오디오 플레이어 그래서 사용자 지정 컨트롤을 사용할 수 숨겨져 있습니다. 이것은 숨겨진 div에서 플레이어와 잘 동작했습니다. 그러나 iPhone에서는 div가 사용자 정의 컨트롤과 함께 표시되거나 작동하도록 표시되어야합니다.

display : none이 아닌 z- 색인이 낮은 div를 숨겼습니다.

출처

2012-05-22 09:14:18 yolise

HTML5의 오디오 플레이어는 사용자의 클릭을 필요로한다. 당신이 플레이어를 클릭

일 : 브라우저 버전에

<audio src="foo.ogg" width="200px" height="200px" />

출처

2012-05-21 19:16:25

HTML5 오디오 플레이어는 Safari/Chrome에서 작동하지만 iPhone은 작동하지 않습니다.

답변

관련 문제