我试图弄清楚如何在 div 内显示与播放列表中正在播放的歌曲相对应的图像。现在，我只有图像显示该人是否实际上单击了一首歌，但我希望它在代码自动从一首歌曲切换到下一首歌曲时显示图像。我不知道该怎么做，因为我对 jquery 很陌生，这里是相关的片段。
这只是播放列表的一个片段:
<li>
<a href="audio/02.mp3"onclick="changeImg('audio/2.jpg');" >
Above All - Michael W. Smith
</a>
</li>
这是使用的脚本(顺便说一句，我确信可以以非常大的方式压缩它们 - 但我还没有尝试过这个!
<script>
$(document).ready(function () {
init();
function init(){
var current = 0;
var audio = $('#audio');
var playlist = $('#playlist');
var tracks = playlist.find('li a');
var len = tracks.length - 1;
var imghol = document.getElementById("imageHolder");
audio[0].volume = .10;
audio[0].play();
playlist.on('click','a', function(e){
e.preventDefault();
link = $(this);
current = link.parent().index();
run(link, audio[0]);
});
audio[0].addEventListener('ended',function(e){
current++;
if(current == len){
current = 0;
link = playlist.find('a')[0];
}else{
link = playlist.find('a')[current];
}
run($(link),audio[0]);
});
}
function run(link, player){
player.src = link.attr('href');
par = link.parent();
par.addClass('active').siblings().removeClass('active');
player.load();
player.play();
}
});
</script>
<script type="text/javascript">
function changeImg(image){
var imghol = document.getElementById("imageHolder");
imghol.src = image;
}
</script>
到目前为止，一切都很好，但正如我所说 - 当歌曲自动播放另一首歌曲时，我希望与歌曲对应的图像自动切换到另一个图像。
图像显示方法取自此网站，其中其他人询问如何在单击列表项时显示图像，我调整了答案以适合我需要它显示的内容 - 但无法弄清楚如何让它显示车展!
谢谢:)
最佳答案
下面的代码完全未经测试。 请参阅下面的编辑。
我重新订购了那里的东西。
请更改您的标记 <a href="audio/02.mp3"onclick="changeImg('audio/2.jpg');" >
对此:<a href="audio/02.mp3">
调整文件名以匹配!
audio/02.mp3应该匹配 audio/02.jpg
只是文件扩展名需要不同。
然后，考虑一下:
<script>
$(document).ready(function () {
var current = 0;
var audio = $('#audio');
var playlist = $('#playlist');
var tracks = playlist.find('li a');
var len = tracks.length - 1;
var imghol = $("#imageHolder");
function init(){
audio[0].volume = .10;
//audio[0].play();
}
init();
// Your click handler
playlist.on('click','a', function(e){
e.preventDefault();
link = $(this);
current = link.parent().index();
run(link, audio[0]);
});
// Audio end event handler
audio.on('ended',function(e){
current++;
if(current == len){
current = 0;
link = playlist.find('a')[0];
}else{
link = playlist.find('a')[current];
}
run($(link),audio[0]);
});
// Run function
function run(link, player){
player.src = link.attr('href');
par = link.parent();
par.addClass('active').siblings().removeClass('active');
player.load();
player.play();
// The image change is here
href = link.attr("href");
href = href.replace(".mp3",".jpg"); // changes .mp3 for .jpg ADJUST your file naming
//imghol.src = href;
imghol.attr("src",href);
}
}); // ready
</script>
我尝试了 PasteBin 中的代码.
只有 4 个错误需要修复。第一个来 self 建议的代码。
- 在
run()函数，imghol.src = href;应该是imghol.attr("src",href);自imghol是一个 jQuery 对象。
其他错误是你的。
href = href.replace("audio/02.mp3","audio/02.jpg");此行旨在捕获 href 中的文件名。 但是扩展名已更改(从 .mp3 到 .jpg)。我的建议是正确的。它必须是href = href.replace(".mp3",".jpg"); <body onload="PlayerLoaded()">至<body> 。此功能已不存在。audio[0].play();来自init()功能。您还不想播放任何内容...没有可播放的文件!现在一些建议:
不要使用 jQuery slim!对于您实际拥有的代码，这是可以的。但是，一旦您尝试向图像添加动画(例如 fadeIn() )...它就不起作用。 slim version与完整版本相同，减去动画、Ajax 和更多有用的东西。只有当性能很重要时，这才是好的。但如果没有 jQuery 提供的所有功能...最好只使用纯 JavaScript!如果您尝试 jQuery，请使用完整的库。
并使用console 。所有调试脚本的提示都在那里供您查看。
关于javascript - 需要一些 javascript 同时显示图像和播放歌曲，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47664713/