1

PCのSafariで動作するHTML5オーディオプレーヤーがありますが、（私の）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

4

2 に答える 2

2

私のブラウザバージョンでは、カスタムコントロールを使用できるように、デフォルトのオーディオプレーヤーを非表示にしました。これは、非表示のdivのプレーヤーで正常に機能しました。ただし、iPhoneでは、カスタムコントロールを使用している場合でも、機能するためにdivを表示する必要があります（または表示されます）。

display：noneではなく低いz-indexでdivを非表示にしました。

于 2012-05-22T09:14:18.617 に答える
1

iPhoneのHTML5オーディオプレーヤーでは、ユーザーをクリックする必要があります。

プレーヤーをクリックすると機能します。

<audio src="foo.ogg" width="200px" height="200px" />
于 2012-05-21T19:16:25.023 に答える