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

最佳答案

更新
只是增加了更多的细节,一个更大的播放列表,并使用一个更容易扩展的数组。下一个改进是json。
使用普通javascript有时比jquery简单,比如音频和视频。
使用getElementById获取对#player的引用
然后,.src属性按点符号更改。
当您交换.load时需要src方法。
当然还有。
通常,我会对click事件使用.play,但jquery更容易。
注意:尽管addEventListener属性位于src上,但请注意,我引用的是<source>
另请注意:我删除了ogg,因为mp3现在是通用的,而且在未来几年里我看不到这种变化。
另一个注意事项:不要使用<audio>或它的任何接口(即<table>等)进行布局,它们用于数据。

$(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>

08-25 15:14
查看更多