Cool Audio Player Script for Javascript or PHP

This is a cool cross browser html audio player script with two editions:

• Cool Audio Player Javascript Edition
• Cool Audio Player PHP Edition

Features

• Cross Browser Support: Uses HTML5 Audio for modern browsers. (IE 9+, Firefox 31+, Chrome, Safari 3.1+, Opera 14+, iOS, Android) Uses Windows Media Player scripting for IE 6,7 and 8. Uses Quicktime for older Firefox browsers.
• Overcomes Chrome limitation of only opening a maximum of 6 connections at once
• Fully customizable skin
• Playlist in invisible textarea
• Slider Controls
• Additional PHP Edition Features
  • Secret folder where audio files are located
  • Automatically load playlist from folder
  • Automatically get MP3 ID3 title and artist tags
  • Prevents caching of file to obscure downloading of audio files

Cool Audio Player Script Javascript Edition dlc_b

Download

1. Edit coolaudio.js and specify the folder that contains the audio mp3 files in the variable audio_folder

2. Add an invisible textarea to your HTML document where you want the audio players to appear with each song on a seperate line like:

   <textarea class="audio_list" style="display:none">
   blue.mp3
   waltz.mp3
   air.mp3
   </textarea>
   

   You may have multiple textareas as long as they have class="audio_list". Since javascript cannot read MP3 ID3 tags such as title and artist you may also specify information about the song after ## like this:

   <textarea class="audio_list" style="display:none">
   blue.mp3##<b>Title:</b> Blue Danube<br >/><b>Artist: </b> Johann Strauss II
   waltz.mp3##<b>Title:</b> Waltz Medley<br >/><b>Artist: </b> Johann Strauss II
   air.mp3##<b>Title:</b> Air<br >/><b>Artist: </b> Johann Sebastian Bach
   </textarea>
   

3. Add the following customizable skin near the top of your html document:

   <div class="audio_player" id="audio_player" style="display:none;"> <!-- Begin audio_player skin -->
   	<div class="audio_filename" id="audio_filename"> </div><!-- Remove to not display filenames -->
   	<div class="audio_description" id="audio_description"> </div>
   	<span class="audio_button" id="audio_play">&#x25BA;</span>
   	<span class="audio_button" id="audio_pause"><small>&#x2590; &#x258C;</small></span>
   	<span class="audio_time" id="audio_time"> </span>
   	<span class="audio_bar" id="audio_bar">
   		<div class="audio_slot"></div>
   		<div class="audio_buffer" id="audio_buffer"></div>
   		<div class="audio_control"></div> 
   		<div class="audio_knob"></div>
   	</span>
   	<span class="audio_duration" id="audio_duration"> </span> <!-- Some people replace with id="audio_remaining" -->
   </div> <!-- End audio_player skin -->
   

4. Add this stylesheet to your document:

5. Add the following call to the script near the bottom of your html document:

   <script id="audio_script" type="text/javascript" src="coolaudio.js"></script>
   

Cool Audio Player Script PHP Edition

Click here for a demo of Cool Audio Player PHP Edition dlc_b

Download

1. Edit coolaudio.php and specify the folder that contains the audio mp3 files in the variable $audio_folder. The script will automatically get the listing of audio files from the folder and the MP3 ID3 title and artist tags.

2. Add the following customizable skin near the top of your html document:

   <div class="audio_player" id="audio_player" style="display:none;"> <!-- Begin audio_player skin -->
   	<div class="audio_filename" id="audio_filename"> </div><!-- Remove to not display filenames -->
   	<div class="audio_description" id="audio_description"> </div>
   	<span class="audio_button" id="audio_play">&#x25BA;</span>
   	<span class="audio_button" id="audio_pause"><small>&#x2590; &#x258C;</small></span>
   	<span class="audio_time" id="audio_time"> </span>
   	<span class="audio_bar" id="audio_bar">
   		<div class="audio_slot"></div>
   		<div class="audio_buffer" id="audio_buffer"></div>
   		<div class="audio_control"></div> 
   		<div class="audio_knob"></div>
   	</span>
   	<span class="audio_duration" id="audio_duration"> </span> <!-- Some people replace with id="audio_remaining" -->
   </div> <!-- End audio_player skin -->
   

3. Add this stylesheet to your document:

4. Add the following call to the script near the bottom of your html document:

   <script id="audio_script" type="text/javascript" src="coolaudio.php"></script>
   

History

4/18/2016 - Version 1.1b - PHP Edition - Bug Fix: If PHP is set to display warnings then get "Variable $bits undefined on line 167" warning. Fixed by declaring variable $bits on line 84. Also undefined constant warning on line 196. Fixed by commenting line 195 and 196 because they were no longer being used. It was an old way to get formatted_time.

11/30/2015 - Version 1.1 - Major bug fixes for getting correct bitrate and durations for some MP3 files in the PHP edition.
Bug fix: iOS was not updating the current time of the song because iOS does not support adding events without addEventListener. Added addEventListener for timeupdate and durationchange so now they display in iOS. Note: iOS does not support displaying the duration of the song until play is pressed because it does not get the data for duration until a user presses play. This is a security design in iOS Safari.

12/19/2014 - Version 1.0 - Cool Audio Player Script Created

Future Enhancements

• Pagination so audio files per page can be specified and easily navigate between pages.
• PHP Edition: Play only 30 seconds of audio.