How to load a mp3 link into an audio player on a click

Question

I'm trying to find a way to load an mp3 file when I click on a div called 'front-start-play' and loads the mp3 into audio-player. I'm not familiar with data-rel and I looked at other questions that are similar but they deal with the link of the url already in the code where as this is going to be used on a site with 10+ posts with different urls and need to be loaded into the play when they are clicked.

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();
});

Possible duplicate of [Play an audio file using jQuery when a button is clicked](https://stackoverflow.com/questions/8489710/play-an-audio-file-using-jquery-when-a-button-is-clicked) — , Jun 10 '17 at 16:31

score 2 · Accepted Answer · answered Jun 10 '17 at 16:34

Instead of:

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

you need to set the audio source:

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

How to load a mp3 link into an audio player on a click

1 Answers1