Search in forum:
Search


Author Message
Post06/13/2012 at 8:21pm (UTC)    
Post subject: HTML5 Background Audio Player

HTML5 Background Audio Player

Author: Dynamic Drive

Description: HTML5 background audio player lets you play "soothing" background music on your pages with a simple user interface to control basic tasks such as stopping or lowering its volume. Unlike a regular audio player, it can remember the player's current point in the music playback, volume, and whether it's paused, so as the user transitions from page to page, the music continues where it last left off with minimal disruptions.

HTML5 audio (the <audio> element) is supported in IE9+, FF3.5+, Chrome/Safari 3+, and Opera 10.5+. The player automatically hides the player UI in browsers that don't support it.

Quote:
<link href="http://www.dynamicdrive.com/dynamicindex11/bgaudioplayer.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script src="http://www.dynamicdrive.com/dynamicindex11/bgaudioplayer.js">

/***********************************************
* HTML5 background audio player (c) Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/

</script>

<!--Define audio tag with source elements pointing to audio file (and fallback files)-->

<audio id="mybgplayer">
<source src="http://www.dynamicdrive.com/dynamicindex11/MarionHarris-IAintGotNobody.mp3" type="audio/mpeg">
</audio>

<!--Define corresponding audio interface. Certain CSS classes trigger changes to them-->

<div id="mybgplayerui" class="bgplayerui">
<img class="play" src="http://www.dynamicdrive.com/dynamicindex11/play.gif" data-pausesrc="http://www.dynamicdrive.com/dynamicindex11/pause.gif" /> <img class="rewind" src="http://www.dynamicdrive.com/dynamicindex11/restart.gif" style="position:relative; left:-4px" /> <div class="volume"></div>

</div>

<script>


var playerinstance=bgaudioplayer({
audioid: 'mybgplayer', // id of audio element
audiointerface: 'mybgplayerui', // id of corresponding UI div
autoplay: true, // auto play music?
persistTimeLine: true, // Persist player's current timeline/ volume when moving from page to page?
volume: 0.1, // Default volume (0.0 to 1.0)
volumelevels: 15 // # of volume bars to show in UI
})

</script>


Playing music's url is emphasized in RED. You can change it with your own music url.

Music must be uploaded as mp3, ogg, wav, or mp4.

If you have a problem, pls write here!

Have a nice time!
______________
- If you love your own-free-website, fight against to spams and spammers! Please support us, let's remove all the spammers together! We don't want to see spams and spammers on OFW board!

- The only language of the board is English / Englisch / Anglaise / Inglés / Inglese / İngilizce / Angielski / Английский / Αγγλικά / 英语 / 英语简体英文. So please write in just English!

Own-free-website.com

Display posts from previous:   


Powered by phpBB © 2001, 2005 phpBB Group