Comment charger un lien mp3 dans un lecteur audio sur un clic

Question

J'essaie de trouver un moyen de charger un fichier mp3 lorsque je clique sur un div appelé «début-play-play» et charge le mp3 en audio-player. Je ne suis pas familier avec data-rel et j'ai regardé d'autres questions qui sont similaires, mais ils traitent le lien de l'URL déjà dans le code où, comme cela va être utilisé sur un site avec 10+ messages avec des URL différentes et doivent être chargé dans le jeu quand ils sont cliqués.

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

Au lieu de:

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

vous devez définir la source audio:

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