Question

我试图找出如何在与播放列表中播放的歌曲相对应的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>

到目前为止，一切都很有效，但正如我所说的那样 - 当歌曲自动播放不同的歌曲时，我希望让与歌曲对应的图像自动切换到另一张图像。

图像显示方法取自此网站，其他人在点击列表项时询问如何显示图像，我调整了答案以适应我需要显示的内容 - 但无法弄明白车展！

谢谢：）

Answer 1

~~以下代码完全未经测试。~~ 请参阅下面的编辑。
我在那里重新订购了东西。

请从<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个错误需要修复。第一个来自我建议的代码。

在run()函数中，imghol.src = href;应为imghol.attr("src",href);，因为imghol是jQuery对象。

其他错误是你的。

href = href.replace("audio/02.mp3","audio/02.jpg");此行旨在捕获href 但的文件名，其中包含更改的扩展名（从.mp3到{{1 }}）。我的建议是正确的。它必须是.jpg
将href = href.replace(".mp3",".jpg");更改为<body onload="PlayerLoaded()">。此功能不再存在。
从<body>功能中删除audio[0].play();。你还不想玩任何东西......没有文件可以玩！

现在有人建议：

不要使用jQuery slim！对于你实际拥有的代码，它没问题。但只要您尝试向图像添加动画（如init()）......它就不会起作用。 slim version与完整版MINUS动画，Ajax和更有用的东西相同。只有表现才重要。但是没有jQuery必须提供的......更好的只是使用纯JavaScript！如果您试验jQuery，请使用完整的库。

并使用console。调试脚本的所有提示都可供您查看。

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

1 个答案: