HTML5クロスブラウザー再生リスト

Question

Use of reference to calling object (this) using HTML5 audio and jQuery 編集したいプレイリストがありますが、これはCromeとSafariで完全に機能しますが、他のブラウザーでは再生できません。すべてのブラウザーでサポートされているわけではありませんmp3ファイル。 （テストされたIEとFireFox、再生していないオーディオ、私のiPodでSafariをテストしても何の問題もありません）しかし、mp3をサポートしていれば、IEはオーディオを再生できません。

jsFiddle

これは、私は上記のリンク先の質問に編集思い付いたものです。私はjQueryを統合してボタンに異なるスタイルを与え、Youtube Play/Pauseボタンのように見せました。ここ 良い例：Playlist

私はこの

this.next = function(){ 
    count++; 
     if(count == 2){count = 0;} 
    $('#uhh').attr('src', 'http://daokun.webs.com/play'+count+'.mp3'); 
    $('#uhh2').attr('src', 'http://daokun.webs.com/play'+count+'.ogg'); 
}; 

そして、これに<audio>タグを変更するなどのオーディオのsrcリンク変更するjQueryのを使用しようとしました：これを行うには

<audio id="aud" autoplay autobuffer> 
    <source id="uhh2" src="http://daokun.webs.com/play0.ogg" type="audio/ogg" /> 
    <source id="uhh" src="http://daokun.webs.com/play0.mp3" type="audio/mpeg" /> 
</audio> 

をcrossbrowserだが、曲が変更された後は<source>タグのsrcは変更されない。

私はまた、このような次の機能を編集してみました：

this.next = function(){ 
count++; 
    if(count == 2){count = 0;} 
    uhh = 'http://daokun.webs.com/play'+count+'.mp3'; 
    uhh2 = 'http://daokun.webs.com/play'+count+'.ogg'; 
}; 

をそしてvariabelsを追加します。

var uhh = $('#uhh').attr('src'), 
    uhh2 = $('#uhh2').attr('src'); 

このaswell、まだ何をしようとしました。

var uhh = document.getElementById('aud').firstChild, 
    uhh2 = document.getElementById('aud').lastChild; 

が、私はこの中にそれを編集したので、動作しませんでした：

var uhh = document.getElementById('uhh'), 
    uhh2 = document.getElementById('uhh2'); 

次関数に：2つの<source> sの

this.next = function(){ 
    count++; 
     if(count == 2){count = 0;} 
    uhh.src = 'http://daokun.webs.com/play'+count+'.mp3'; 
    uhh2.src = 'http://daokun.webs.com/play'+count+'.mp3'; 
}; 

割り当てのID（ううとuhh2）が、何もない。

Chromeのソースコードを確認して、<source>の2つのsrcリンクが変更されていることに気付きましたが、リソースタブを確認してmp3ファイルがページに読み込まれないという問題がありました。 <audio>タグを使用している間は、新しいmp3ファイルのみがページにロードされて再生されます。

私は間違っているのですか？それともうまくいかないのですか？

Answer 1

あなたはここでたくさんのように見えますが、私はあなたがそれに取り組んでいることが好きです。あなたがしていない唯一のことは、「イベントをキャプチャする」ことです。

$("#aud").addEventListener('ended', function(){ 
    this.currentTime=0; 
    this.next = function(){ 
    count++; 
    if(count == 2){count = 0;} 
    $('#uhh').attr('src', 'http://daokun.webs.com/play'+count+'.mp3'); 
    $('#uhh2').attr('src', 'http://daokun.webs.com/play'+count+'.ogg'); 
    }; 
}, false); 

その後追加あなたはそれとイベントの「末端」を捕獲することができるはずオーディオタグ

<audio id="aud" autoplay autobuffer controls preload"> 

に「予圧を制御します」。私はまだ最も精通したHTML5の専門家ではなく、ただちょっとだけ手伝っています。

とにかく、上記の例のようなものであれば、曲の「終わり」を捉えることができるようになります。おかげでたくさん

HTML 5 Audio Loops