下面的函数使用我制作的 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
最佳答案
我重新创建了你的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();
});
请尝试一下，我还没有测试过。
希望有帮助。
关于javascript - jQuery/JavaScript 动态更改音频源，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35643196/