單擊如何將mp3鏈接加載到音頻播放器中

Question

我試圖找到一種方法，當我單擊名為'front-start-play'的div並將mp3加載到audio-player時，加載mp3文件的方法。 我對data-rel不熟悉，我看了其他類似的問題，但它們處理的是代碼中已經存在的url鏈接，因為該鏈接將在網站上使用10多個帖子使用不同的url和單擊時需要將它們加載到劇本中。

HTML：

<div class="front-start-play" data-rel="http://www.jplayer.org/audio/mp3/Miaow-01-Tempered-song.mp3"> Load "Song1" </div>

<div class="audio-player-wrapper">
<div class="mejs__button mejs__group-left">
<div class="rewind-btn">
  <button title="Rewind 15 seconds">15</button>
</div>
<div class="playpause-btn">
  <button title="Play" class="play" id="ppbtn"></button>
</div>
<div class="forward-btn">
  <button title="Forward 15 seconds">15</button>
</div>
</div>
<div class="current-time">00:00</div>
<div class="duration-time">00:00</div>
<div class="mejs__button mobile-mute">
<button class="mobile-mute-btn mobile-mute-off"></button>
</div>
<audio width="100%" height="75px" id="audio-player" src="" type="audio/mp3" controls="controls"></audio>
</div>

JS：

$(".front-start-play").click(function(){
var mp3Url = $(this).data('rel');
$("#audio-player").load();
});

Answer 1

代替：

$("#audio-player").load();

您需要設置音頻源：

$("#audio-player").attr('src', mp3Url);

 $(".front-start-play").click(function(){ var mp3Url = $(this).data('rel'); $("#audio-player").attr('src', mp3Url); }); $(".front-start-play").trigger('click'); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="front-start-play" data-rel="http://www.jplayer.org/audio/mp3/Miaow-01-Tempered-song.mp3"> Load "Song1" </div> <div class="audio-player-wrapper"> <div class="mejs__button mejs__group-left"> <div class="rewind-btn"> <button title="Rewind 15 seconds">15</button> </div> <div class="playpause-btn"> <button title="Play" class="play" id="ppbtn"></button> </div> <div class="forward-btn"> <button title="Forward 15 seconds">15</button> </div> </div> <div class="current-time">00:00</div> <div class="duration-time">00:00</div> <div class="mejs__button mobile-mute"> <button class="mobile-mute-btn mobile-mute-off"></button> </div> <audio width="100%" height="75px" id="audio-player" src="" type="audio/mp3" controls="controls"></audio> </div>