如何在音樂播放器中插入jquery圖像

Question

我使用本教程創建了音樂播放器https://www.youtube.com/watch?v=t0Qp3McD3j0我希望能夠在使用JQuery播放歌曲時插入圖像。我仍在學習，但要理解播放器中的很多代碼。我搜索谷歌和計算器，但仍然沒有弄清楚。這是我的代碼部分：

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：

;/*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); 
 
    
 
}());

@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";}

<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>