【问题标题】：How to dynamically change html player src from track list如何从曲目列表中动态更改 html player src
【发布时间】：2016-04-26 00:38:48
【问题描述】：

我正在尝试使用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>

【问题讨论】：

如果删除当前的source 元素并附加一个带有所需src 的新元素会发生什么？
你看过stackoverflow.com/questions/10792163/…

标签： jquery html shopify liquid

【解决方案1】：

更新

只是添加了更多细节、更大的播放列表，以及使用数组更容易扩展。下一个改进将是 JSON。

使用纯 JavaScript 有时比 jQuery 更简单，比如音频和视频。

使用getElementById 获取对#player 的引用
然后.src 属性由点表示法更改。
那么交换src时需要.load方法
当然还有.play。
通常情况下，我会使用addEventListener 来处理点击事件，但 jQuery 更简单。

注意：虽然src 属性位于<source> 上，但请注意我指的是<audio>。

另请注意：我删除了 ogg，因为 mp3 现在是通用的，而且我认为未来几年这种情况不会改变。

另一个注意事项：不要使用<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>
      <!--Each list item has a unique data-idx='x' and an identical .song class.³-->
      <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>

【讨论】：