Audio player that supports song descriptions?

Windbrand · 11-18-2012, 09:59 PM

Does anyone know of an HTML/Javascript/JQuery/MooTools/etc audio player that supports song descriptions? I've searched all over the web, from jplayer, jwplayer, to sound manager and audio.js, NONE of them supports the basic feature known as song descriptions. All I need is when I click a song in a playlist, some information about the song shows up, either fades in directly on the player itself or on an adjacent div or anything. I've tried adding this feature to a couple of the audio players I found but it doesn't work, and the player code itself is simply way too complex to engineer, it's like trying to manipulate the entire JQuery library code.

rnd me · 11-19-2012, 08:18 AM

where would this info come from?

Windbrand · 11-19-2012, 09:30 PM

Um come from me?
I just write a few lines describing the songs, since I wrote the songs. For example, "this song was written in 2010, the title means this, written for so and so".

rnd me · 11-20-2012, 12:42 PM

Quote:

Originally Posted by Windbrand

Um come from me?
I just write a few lines describing the songs, since I wrote the songs. For example, "this song was written in 2010, the title means this, written for so and so".

ok cool. i wasn't sure if you were trying to grab ID3 info, artist bios from a webservice or what...

since you will author the content, you have complete control over it's appearance and behavior.

since you simply want to show/hide the info related to the current track, the simplest way is to use CSS to control the show/hide/fading, along with a touch of javascript to connect the player to the "active item" in the list of track metas.

my hypothetical example simply uses the url of a track to correlate the track info:

Code:

 
 
<body>

<style>
  .meta[data-src] {
  position: relative;
 /* hide via smallness instead of "display:none" to allow 'grow' animation: */
   height: 0px;  width: 0px; 
  background:#aaa; overflow: hidden; 


 /* all-browser animation css:  */
   	    -o-transition-property:all ;
		   -moz-transition-property:all ;
		-webkit-transition-property:all ;
		        transition-property:all ;
	     -o-transition-duration:500ms ;
		   -moz-transition-duration:500ms ;
		-webkit-transition-duration:500ms ;
		        transition-duration:500ms ; 
}

  /* this is what it looks like when showing the current track: */
  .meta[data-src].active { 
      height: 10em; 
      width:  10em; 
  }

</style>

<script>

//a few helper functions:
   function Q(s){return [].slice.call(document.body.querySelectorAll(sel));}
   function setClass(a){a.className=this;}



function play(url){
     Q("[data-src]").map(setClass, 'meta');
     setClass.call( "meta active", Q("[data-src='"+url+"']")[0] );
    audio.src=audio.title=url; //probably something like xxx.play(url) w/libs...
}



</script>

<!-- stand in audio player, or enough as-is for chrome and mobile -->
<audio id="audio" autoplay controls prebuffer ></audio>

<!-- the worlds crappiest playlist still allows specific track selection -->
<select onchange='play(this.value)'>
  <option value="/aud/samp1.mp3">Sample 1</option>
  <option value="/aud/samp2.mp3">Sample 2</option>
  <option value="/aud/samp3.mp3">Sample 3</option>
  <option value="/aud/samp4b.mp3">Sample 4</option>
</select>


<div id="playing"> <!-- fake track descriptions, all hidden in css -->
  <div class='meta' data-src="/aud/samp1.mp3">1111111</div>
  <div class='meta' data-src="/aud/samp2.mp3">2222222</div>
  <div class='meta' data-src="/aud/samp3.mp3">3333333</div>
  <div class='meta' data-src="/aud/samp4b.mp3">4444444</div>
</div>

</body>

swap out your framework commands for audio control as needed.
one nice thing about this code is that it does the heavy animation lifting in CSS, where it's much faster and smoother when playing audio, and it's much easier to customize than hard-coding a bunch of $().css() commands.

let me know if you need a hand integrating it into you code.