jQuery/JavaScript 动态更改音频源答案

【问题标题】：jQuery/JavaScript Change Audio Source dynamicallyjQuery/JavaScript 动态更改音频源
【发布时间】：2016-02-26 03:59:14
【问题描述】：

我下面的函数从我制作的 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

【问题讨论】：

您是否尝试将事件处理程序添加到按钮以删除源并使用新的源音频重新创建？像这样jsfiddle example

标签： javascript jquery json

【解决方案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();
});

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

希望对你有帮助。

【讨论】：

我认为这是朝着正确方向迈出的一步。我将用我现在拥有的内容更新我上面的代码。这里也是我试图让它工作的网站部分的链接。 summonersremix.com/search.html

【解决方案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();
 });

希望这能解决您的问题。

【讨论】：

这似乎不起作用。但是我将您的更新添加到当前代码中。

【解决方案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

【讨论】：