jqueryで画像を音楽プレーヤーに挿入する方法

Question

このチュートリアルを使用して音楽プレーヤーを作成しましたhttps://www.youtube.com/watch?v=t0Qp3McD3j0 JQueryを使用して曲を再生するときに画像を挿入したいと考えています。私はまだ学んでいますが、プレーヤーの多くのコードを理解しています。私はGoogleとstackoverflowを検索したが、まだそれを考え出していない。これは私のコードの一部です：あなたは（論理的、および使用）を格納するために表紙画像srcをdata-cover属性を使用することができます

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

：

;/*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>