Question

下面我的函数使用我制作的JSON文件中的信息加载HTML。我希望播放按钮不播放一首默认歌曲，但是根据JSON信息更改歌曲，然后播放正确的歌曲。

我在编写一个可以在这方面起作用的函数时遇到问题。我有jQuery加载音频元素但我想用播放按钮动态更改音频源。

 <!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

Answer 1

我重新创建了您的code here。我做的是我在数据属性上添加了每个mp3的源代码，每次单击按钮时，它都会获取源并重新创建音频元素，然后播放它。

此代码的重要部分。

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

请尝试一下，但我还没有测试过它。

希望它有所帮助。

Answer 2

每次更改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();
 });

希望这能解决您的问题。

Answer 3

我终于让它正常工作了。谢谢你们所有人的帮助。

 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动态更改音频源

3 个答案: