トラックリストの別の曲を再生するときにsrc属性が入れ替わるhtmlオーディオプレーヤーを使用しようとしています。動的にhtmlプレーヤーsrcをトラックリストから変更する方法

私は以下のコードを書いて、プレーヤのsrcをスワップしますが、プレイヤーが再生する実際の曲は、この新しいsrc URLがスワップされても更新されません。

アイデアをいただければ幸いです。

<!-- PLAYER --> 
 
<div id="player_container"> 
 
    <div id="player_wrapper"> 
 
    <audio id="player" controls> 
 
     <source src="default_song_url" type="audio/ogg">    
 
     <source src="default_song_url" type="audio/mpeg"> 
 
     Your browser does not support the audio element. 
 
    </audio>   
 
    </div>  
 
</div> 
 

 

 
<!-- TRACK LIST (fed through a for loop for other songs) --> 
 
<tr> 
 
    <td>Song title</td> 
 
    <td><a class="play_song1">Play</a> </td> 
 
     <script> 
 
     $(document).ready(function(){ 
 
     $(".play_song1").click(function(){ 
 
      $("#player_wrapper source").attr("src", "song_1_url"); 
 
              }); 
 
     }); 
 
    </script> 
 
</tr>

出典

2016-04-26 user3903296

あなたが現在 'source'要素を削除し、必要なSRCを使用して新しい要素を追加した場合はどうなりますか？ –

http://stackoverflow.com/questions/10792163/change-audio-src-with-javascriptを見ましたか？ – jpopesculian

UPDATE

ただ、詳細は、大きなプレイリスト、および容易な拡張のためのアレイの使用を追加しました。次の改善点はJSONです。

プレーンJavaScriptは、オーディオやビデオのように、jQueryよりも単純な場合があります。

使用getElementByIdはその後#player
ドット表記法によって.src属性変更への参照を取得します。
あなたはもちろんのsrc
そして.playを入れ替えるときに.load方法が必要とされています。

通常、私はaddEventListenerをクリックイベントに使用しますが、jQueryは簡単です。

注：src属性は<source>に位置しているが、私が代わりに<audio>呼ば気づきます。

参考： mp3は現在普及しているため、私はoggを削除しましたが、今後数年間変化は見られません。
もう一つ注意
：<table>かのいずれかを使用しないでくださいインターフェイスです（すなわちtr, th, td、等...）レイアウトのために、彼らはデータに使用されています。

$(document).ready(function() { // Playlist is an array of 5 songs.² var playlist = ['balls.mp3', 'pf-righteous.mp3', 'fightclub.mp3', '111.mp3', '00.mp3']; // A delegated click event is on each li.song // when triggered the following happens: $(".song").on('click', function(e) { // This prevents the anchors from jumping like they normally do. e.preventDefault(); // $(this) is the li.song that was picked by user. Use .data() // to determine the li.song's index number. var song = $(this).data('idx'); // Reference the audio element var ply = document.getElementById('player'); // This url is the location where the mp3s reside.¹ var base = 'http://glpjt.s3.amazonaws.com/so/av/'; // Here the src is concatenated // 1. The base¹ URL + // 2. The playlist array² index is machted with #playlist li.play.³ // 3. After the new src is made, load() the player and play() ply.src = base + playlist[song]; ply.load(); ply.play(); }); });

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <div id="playerBox"> <div id="playerLayer"> <audio id="player" controls> <source src="http://glpjt.s3.amazonaws.com/so/av/pf-righteous.mp3" type="audio/mpeg"> </audio> </div> <dl id="playlist"> <dt>Playlist</dt>  <a href="#" data-idx="0" class="song"> <dd>Play 0</dd> </a> <a href="#" data-idx="1" class="song"> <dd>Play 1</dd> </a> <a href="#" data-idx="2" class="song"> <dd>Play 2</dd> </a> <a href="#" data-idx="3" class="song"> <dd>Play 3</dd> </a> <a href="#" data-idx="4" class="song"> <dd>Play 4</dd> </a> </dl> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

出典

2016-04-26 01:24:38 zer00ne

動的にhtmlプレーヤーsrcをトラックリストから変更する方法

答えて

UPDATE

関連する問題