Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Sep 2011
    Posts
    44
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Audio player that supports song descriptions?

    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.

  • #2
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,350
    Thanks
    11
    Thanked 589 Times in 570 Posts
    where would this info come from?
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • #3
    New Coder
    Join Date
    Sep 2011
    Posts
    44
    Thanks
    4
    Thanked 0 Times in 0 Posts
    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".

  • #4
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,350
    Thanks
    11
    Thanked 589 Times in 570 Posts
    Quote Originally Posted by Windbrand View Post
    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.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •