Der Versuch, Song Beschreibungen zu den Ton hinzufügen, während sie

Question

spielen Ich suche eine Beschreibung über Songs anzeigen zu können, wenn sie angeklickt werden, die durch die Dauer des Songs spielen wird. Wenn der erste Song angeklickt wird, wird eine kleine Beschreibung des Songs, den ich zeigen möchte, während der Wiedergabe des Songs angezeigt. Nachdem das Lied beendet ist, sollte die Box mit dem Display verschwinden.

Der HTML-Code für die Audio-Dateien sind:

<audio src="http://mediaplayer.yahoo.com/js" controls id="audioPlayer"> 
    Sorry, your browser doesn't support html5! 
</audio> 
<ul id="playlist"> 
    <li class="current-song"><a href="sounds/Sad%20Mans%20Tongue.mp3"><span class="blacktextbg">Sad Man's Tongue</span></a></li> 
    <li><a href="sounds/breed.mp3"><span class="blacktextbg">Breed</span></a></li> 
    <!--<li><a href="sounds/creep.mp3">Creep</a></li>--> 
    <li><a href="sounds/Everything%20Zen.mp3"><span class="blacktextbg">Everything Zen</span></a></li> 
    <li><a href="sounds/Ain't%20It%20Funky%20Now%20Pt%202.mp3"><span class="blacktextbg">Ain't It Funky Now Pt 2</span></a></li> 
    <!--<li><a href="sounds/once.mp3">Once</a></li>--> 
    <li><a href="sounds/killing all the joy.mp3"><span class="blacktextbg">Killing All The Joy</span></a></li> 
    <!--<li><a href="sounds/torn.mp3">Torn</a></li> 
    <li><a href="sounds/aftermidnight.mp3">After Midnight</a></li>--> 
    <li><a href="sounds/X1BetaOWS.mp3"><span class="blacktextbg">OWS</span></a></li> 
    <li><a href="sounds/X1 Alpha.mp3"><span class="blacktextbg">X1 Alpha</span></a></li> 
    <!--<li><a href="sounds/undome.mp3">Undo Me</a></li>--> 
    <li><a href="sounds/Low%20.mp3"><span class="blacktextbg">Low</span></a></li> 
    <!--<li><a href="sounds/Cumbersome.mp3">Cumbersome</a></li> 
    <li><a href="sounds/Thru%20Your%20Window%20.mp3">Thru Your Window</a></li>--> 
    <li><a href="sounds/Reconsider%20Baby.mp3"><span class="blacktextbg">Reconsider Baby</span></a></li> 
    <li><a href="sounds/4lee.mp3"><span class="blacktextbg">4LEE</span></a></li> 
    <li><a href="sounds/show%20biz%20kids.mp3"><span class="blacktextbg">Show Biz Kids</span></a></li> 
    <!--<li><a href="sounds/show%20biz%20guitar.mp3">Show Biz Guitar</a></li> 
    <li><a href="sounds/Voodoo%20Child.mp3">Voodoo Child</a></li> 
    <li><a href="sounds/saveme.mp3">Save Me</a></li>--> 

</ul> 
<script src="https://code.jquery.com/jquery-2.2.0.js"></script> 
<script src="audioPlayer.js"></script> 
<script> 
    audioPlayer(); 
</script> 

Die audioplayer.js Ich verwende ist:

function audioPlayer(){ 
     var currentSong = 0; 
     $("#audioPlayer")[0].src = $("#playlist li a")[0]; 
     $("#playlist li a").click(function(e){ 
      e.preventDefault(); 
      $("#audioPlayer")[0].src = this; 
      $("#audioPlayer")[0].play(); 
      $("#playlist li").removeClass("current-song"); 
      currentSong = $(this).parent().index(); 
      $(this).parent().addClass("current-song"); 
     }); 

     $("#audioPlayer")[0].addEventListener("ended", function(){ 
      currentSong++; 
      if(currentSong == $("#playlist li a").length) 
       currentSong = 0; 
      $("#playlist li").removeClass("current-song"); 
      $("#playlist li:eq("+currentSong+")").addClass("current-song"); 
      $("#audioPlayer")[0].src = $("#playlist li a")[currentSong].href; 
      $("#audioPlayer")[0].play; 
     }); 
    }// JavaScript Document 

Ich glaube, die Art und Weise, es zu lösen wäre etwas aufgenommen zu haben die Datei audioplayer.js, wenn die aktuelle Song-Klasse hinzugefügt wird, obwohl ich mir nicht sicher bin, wie ich das machen soll. Vielen Dank!

Answer 1

die Details Unter der Annahme, sind für jede Ihrer Songs leicht verfügbar sind, ja, könnten Sie Ihre audioPlayer.js ändern Informationen spezifisch für den aktuellen Song anzuzeigen.

CSS 
.song-info { 
    display:none; // hidden by default 
} 

HTML 
<div id="song-info"> 
    Nothing playing. 
</div> 

JS 
let currentDescription = descriptions[currentSong] 
$('#song-info').css('display', 'inline'); 
$('#song-info').text(currentDescription); 

In dem obigen JS, dass es angenommen ‚descriptions‘ ist der Griff auf eine Karte von Song Beschreibungen, Indizes des Songs Array referenziert in audioPlayer.js passend (Beschönigung, wie und wo würden Sie bekommen so ein Karte von). Es ruft den Beschreibungstext für das aktuelle Lied ab und modifiziert den Inhalt des '# song-info'-Div. Sie sollten diese Zeilen in Ihre Datei audioPlayer.js aufnehmen, wenn currentSong einen neuen Wert zugewiesen bekommt.