jQuery/JavaScript Change Audio Source dynamically

Question

My function below loads HTML with information from a JSON file I made. I want the play buttons to not play the one default song, but change the song based on the JSON information and then play the correct song.

I am having issues writing a function that will work in this regard. I have the jQuery load an audio element but I want to dynamically change the source of the audio with the play buttons.

 <!DOCTYPE html>
     <html lang="en">
      <head>
       <meta charset="utf-8" />
        <title>Summoners Remix Champion Search</title>
          <link rel="stylesheet" href="css/searchstyle.css"/>
          </head>
          <body>
          <div id="searcharea">
            <label for="search">Champion Music Search</label>
            <p>Enter the Champion Name to look up specific songs</p>
             <input type="search" name="search" id="search" placeholder="Enter Champion Name or Position" />
           </div>
          <div id="update"></div>
           <script src="js/jquery.js"></script>
           <script src="js/script.js"></script>
        </body>
    </html>



function createAudio(src) {
   output =  '<audio id="audio">';
   // you can add more source tag
   output +=  '<source src='+src+'" type="audio/mp3" />';
   output +=  '</audio>';
 }

 $("document").on("click", ".btn-play", function() {
    var src = $(this).parent("td").data("src");
    var newAudio = $(createAudio(src));
    $("#audio").replaceWith(newAudio);
    // Load src of the audio file
     $("#audio").load();
    newAudio.play();
 });


$('#search').keyup(function() {
   var searchField = $('#search').val();
   var myExp = new RegExp(searchField, "i");
$.getJSON('JSON/data.json', function(data) {
    var output = '<ul class ="searchresults">';

    var buttonPlay = '<button class="btn-play">Play</button>';
    var buttonPause = '<button onClick="document.getElementById('+"'audio'"+ ').pause()">Pause</button>';

    $.each(data, function(key, val){
        if(val.name.search(myExp) != -1){
            output += '<li>';
            output += '<h2>' + val.name + '</h2>';
            output += '<img src="images/champion-images/' + val.name.replace(/'| /g, "") + 'Square.png" alt="'+ val.name +'" />';
            output += '<table><thead><tr><th>Lane</th><th>Song</th></tr></thead>';
            output += '<tr><td>Top</td><td data-src="music/music.mp3">' + val.toplane.replace(/-/g, " ") + buttonPlay + buttonPause + '</td></tr>';
            output += '<tr><td>Mid</td><td data-src="music/music.mp3">' + val.midlane.replace(/-/g, " ") + buttonPlay + buttonPause +'</td></tr>';
            output += '<tr><td>Jungle</td><td data-src="music/Lux/Colours-of-the-Rainbow-(Radio-Mix).m4a">' + val.jungle.replace(/-/g, " ") + buttonPlay + buttonPause +'</td></tr>';
            output += '<tr><td>Bot</td><td data-src="music/Lux/Colours-of-the-Rainbow-(Radio-Mix).m4a">' + val.botlane.replace(/-/g, " ") + buttonPlay + buttonPause +'</td></tr>';
            output += '<tr><td>Support</td><td data-src="music/Lux/Colours-      of-the-Rainbow-(Radio-Mix).m4a">' + val.support.replace(/-/g, " ") + buttonPlay   + buttonPause +'</td></tr>';
            output += '</table>';
            output += '</li>';
           }
          });
           output += '</ul>';
          $('#update').html(output);
      }); //get JSON
  });//#search

did you try adding an event handler to the button that would delete the source and recreate with new source audio? like this [jsfiddle example](https://jsfiddle.net/pspq4kbp/1/) — rrw, Feb 26 '16 at 05:17

score 1 · Answer 1 · answered Feb 26 '16 at 09:35

i have recreated your code here. What I did is I added the source of each mp3 on a data attribute and everytime you click the button, it will get the source and recreate the audio element then play it after.

Important part is this code.

function createAudio(src) {
  output =  '<audio id="audio">';
  // you can add more source tag
  output +=  '<source src='+src+'" type="audio/mp3" />';
  output +=  '</audio>';
}

$("document").on("click", ".btn-play", function() {
    var src = $(this).parent("td").data("src");
  var newAudio = $(createAudio(src));
    $("#audio").replaceWith(newAudio);
  newAudio.play();
});

Please try it, I havent tested it yet though.

Hope it helps.

I think this is a step in the right direction. I will update my code above with what I have now. Also here is the link to the part of the site I am trying to get this to work on. http://summonersremix.com/search.html — nuccio, Feb 29 '16 at 02:04

score 1 · Answer 2 · answered Feb 29 '16 at 04:24

1

You just need to reload the audio element each time when you change the src.

 $("document").on("click", ".btn-play", function() {
    var src = $(this).parent("td").data("src");
    var newAudio = $(createAudio(src));
    $("#audio").replaceWith(newAudio);
    // Load src of the audio file
    $("#audio").load();
    newAudio.play();
 });

Hope this will solve your problem.

answered Feb 29 '16 at 04:24

Abhilash Augustine

4,128
1
24
24

This didn't seem to work. But I added your update to the current code. – nuccio Feb 29 '16 at 23:04

score 1 · Accepted Answer · answered Mar 01 '16 at 04:35

I finally got it to work properly. Thanks for all your guys help.

 function changeAudio(test) {
    var src = test;
    if(src.search("none") > -1){
         src = 'music/music.mp3';
    }
var audioElement = document.getElementById('audio');
audioElement.setAttribute('src', src);
// Load src of the audio file
audioElement.load();
audioElement.play();
};

$('#search').keyup(function() {
    var searchField = $('#search').val();
    var myExp = new RegExp(searchField, "i");
$.getJSON('JSON/data.json', function(data) {
    var output = '<ul class ="searchresults">';

    var buttonPause = '<button onClick="document.getElementById('+"'audio'"+ ').pause()">Pause</button>';

    $.each(data, function(key, val){
        if(val.name.search(myExp) != -1){
            output += '<li>';
            output += '<h2>' + val.name + '</h2>';
            output += '<img src="images/champion-images/' + val.name.replace(/'| /g, "") + 'Square.png" alt="'+ val.name +'" />';
            output += '<table><thead><tr><th>Lane</th><th>Song</th></tr></thead>';
            output += '<tr><td>Top</td><td>' + val.toplane.replace(/-/g, " ") + "<button onClick=\"changeAudio('music/"+val.name+"/"+val.toplane+"."+val.type+"');\">Play</button>"+ buttonPause + '</td></tr>';
            output += '<tr><td>Mid</td><td>' + val.midlane.replace(/-/g, " ") + "<button onClick=\"changeAudio('music/"+val.name+"/"+val.midlane+"."+val.type+"');\">Play</button>" + buttonPause +'</td></tr>';
            output += '<tr><td>Jungle</td><td>' + val.jungle.replace(/-/g, " ") + "<button onClick=\"changeAudio('music/"+val.name+"/"+val.jungle+"."+val.type+"');\">Play</button>" + buttonPause +'</td></tr>';
            output += '<tr><td>Bot</td><td>' + val.botlane.replace(/-/g, " ") + "<button onClick=\"changeAudio('music/"+val.name+"/"+val.botlane+"."+val.type+"');\">Play</button>" + buttonPause +'</td></tr>';
            output += '<tr><td>Support</td><td>' + val.support.replace(/-/g, " ") + "<button onClick=\"changeAudio('music/"+val.name+"/"+val.support+"."+val.type+"');\">Play</button>" + buttonPause +'</td></tr>';
            output += '</table>';
            output += '</li>';
        }
    });
    output += '</ul>';
    $('#update').html(output);
}); //get JSON
});//#search

jQuery/JavaScript Change Audio Source dynamically

3 Answers3

Linked