的jQuery/JavaScript的变化音源动态

我下面HTML从我做了一个JSON文件的信息加载功能。我希望播放按钮不播放一首默认歌曲，但根据JSON信息更改歌曲，然后播放正确的歌曲。的jQuery/JavaScript的变化音源动态

我有写，将在这方面的工作的功能的问题。我有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

来源

2016-02-26 nuccio

您是否尝试添加一个事件处理程序到按钮，将删除源和重新创建新的源音频？像这样[jsfiddle示例]（https://jsfiddle.net/pspq4kbp/1/） – rrw

我终于得到它才能正常工作。谢谢你们的帮助。

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

来源

2016-03-01 04:35:18 nuccio

我重新创建了您的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(); 
});

请试试看，我还没有测试过它。

希望它有帮助。

来源

2016-02-26 09:35:59 rrw

我认为这是朝正确方向迈出的一步。我将用我现在拥有的更新我的代码。另外这里是我试图让这个工作的网站部分的链接。 http://summonersremix.com/search.html – nuccio

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

希望这能解决您的问题。

来源

2016-02-29 04:24:04

这似乎没有工作。但我将你的更新添加到当前的代码中。 – nuccio

的jQuery/JavaScript的变化音源动态

回答

相关问题