Question

我使用本教程创建了一个音乐播放器https://www.youtube.com/watch?v=t0Qp3McD3j0我希望能够在使用JQuery播放歌曲时插入图像。我还在学习但是很了解播放器中的很多代码。我搜索了谷歌和stackoverflow但仍然没有弄明白。这是我的代码的一部分：

JS

       //Insert Cover Image
    $('img.cover').attr('src','../img/covers' + cover);

    $('#playlist li').removeClass('active');
    element.addClass('active');

HTML

 <div id="container">
        <div id="audio-image">
            <img class="cover">
        </div>
        <div id="audio-player">

Answer 1

您可以使用data-cover属性来存储（并使用逻辑上）封面图片src：

＆＃13;

;/*SIMPLE AUDIO PLAYER http://stackoverflow.com/a/34487069/383904*/(function() {

  var AUDIO = document.createElement("audio"),
      COVER = document.getElementById("cover"),
      BTN = document.querySelectorAll("[data-audio]"),
      tot = BTN.length;
  
  function playPause() {
    var src = this.dataset.audio;
    var img = this.dataset.cover;
    if(AUDIO.src != src) AUDIO.src = src;       // Do we already have that audio?
    AUDIO[AUDIO.paused ? "play" : "pause"]();   // Toggle Play/ Pause
    for(var j=0;j<tot;j++) if(BTN[j]!=this) BTN[j].classList.remove("on"); // All Icons
    this.classList.toggle("on");                // Toggle this icon
    AUDIO.addEventListener("ended", playPause); // On audio end set icon to Play
    COVER.src = img || "http://placehold.it/120x160/ddd/567?text=NO+COVER"; // Set cover image
  }
  
  for(var i=0;i<tot;i++) BTN[i].addEventListener("click", playPause);
  
}());

＆＃13;

@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css);

[data-audio]{cursor:pointer;}
[data-audio].on{color: #0ac;}
/*https://fortawesome.github.io/Font-Awesome/cheatsheet/*/
[data-audio]:before{content:"\f144";}
[data-audio].on:before{content:"\f28b";}

＆＃13;

<img id="cover" src="http://placehold.it/120x160/ddd/567?text=NO+COVER"><br>

<a class="fa"
   data-audio="http://upload.wikimedia.org/wikipedia/en/4/45/ACDC_-_Back_In_Black-sample.ogg"
   data-cover="http://placehold.it/120x160/000/fff?text=ACDC">
   ACDC: Back in Black</a><br>
<a class="fa"
   data-audio="https://upload.wikimedia.org/wikipedia/en/3/39/Metallica_-_Enter_Sandman.ogg"
>
   Metallica:Enter Sandman</a><br>
<a class="fa"
   data-audio="https://upload.wikimedia.org/wikipedia/en/5/5e/U2_One.ogg"
   data-cover="http://placehold.it/120x160/f70/fff?text=U2">
   U2: One</a><br>

＆＃13;

如何在音乐播放器中插入带有jquery的图像

1 个答案: