gpt4 book ai didi

javascript - jQuery/JavaScript 动态更改音频源

转载 作者:行者123 更新时间:2023-12-02 14:57:48 25 4
gpt4 key购买 nike

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

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com