jQuery/JavaScript动态更改音频源 [英] jQuery/JavaScript Change Audio Source dynamically
本文介绍了jQuery/JavaScript动态更改音频源的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我下面的函数使用我制作的JSON文件中的信息加载HTML.我希望播放按钮不播放一首默认歌曲，而是根据JSON信息更改歌曲，然后播放正确的歌曲.
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.
我在编写可以在此方面使用的功能时遇到了问题.我让jQuery加载了音频元素，但我想使用播放按钮动态更改音频的来源.
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
推荐答案
我终于使它正常工作了.谢谢大家的帮助.
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动态更改音频源的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
