gpt4 book ai didi

javascript - 需要一些 javascript 同时显示图像和播放歌曲

转载 作者:行者123 更新时间:2023-12-01 05:18:05 25 4
gpt4 key购买 nike

我试图弄清楚如何在 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 建议的代码。

  1. 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/

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