API tools faq
paste
Advertisement
lalatino

Html5 audio cross browser compatible example

lalatino
Jun 30th, 2013
279
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 3.17 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  
  5. <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  6. <title> html5 audio support for all browsers </title>
  7. <script type="text/javascript" src="audio-player/audio-player.js"></script>
  8. <script type='text/javascript'>//<![CDATA[
  9.  
  10.     if (!window.addEventListener) { // for compatibility with IE8 and below
  11.         window.addEventListener = function (type, listener, useCapture) {
  12.             attachEvent('on' + type, function () {
  13.                 listener(event);
  14.             });
  15.         };
  16.     }
  17.     window.addEventListener('load',function(){
  18.         var i = 0; // song index
  19.         //var songList = [ '01.Adresa Ja,Adresa Ty.mp3', '02.uzemie Zazrakov.mp3', '03.Koloseum.mp3' ];
  20.         var songList = [
  21.             'songs/loop1.mp3',
  22.             'songs/loop2.mp3',
  23.             'songs/loop3.mp3',
  24.             'songs/loop4.mp3',
  25.             'songs/loop5.mp3',
  26.             'songs/loop6.mp3',
  27.             'songs/loop7.mp3',
  28.             'songs/loop8.mp3',
  29.             'songs/loop9.mp3'
  30.             ];
  31.         // create audio tag
  32.         var audiocontainer = document.getElementById('audiocontainer'); //or document.body;
  33.         var ae = document.createElement('audio');
  34.         ae.id = 'audioplayer';
  35.         ae.src = songList[0];
  36.         audiocontainer.appendChild(ae);
  37.         // create controls
  38.         var btnPlay = document.createElement('button');
  39.         var btnPrev = document.createElement('button');
  40.         var btnNext = document.createElement('button');
  41.         var testDiv = document.createElement('div');
  42.         btnPlay.innerHTML = 'Play/Pause';
  43.         btnPrev.innerHTML = 'Previous song';
  44.         btnNext.innerHTML = 'Next song';
  45.         testDiv.id = "test";
  46.         audiocontainer.appendChild(btnPlay);
  47.         audiocontainer.appendChild(btnPrev);
  48.         audiocontainer.appendChild(btnNext);
  49.         audiocontainer.appendChild(testDiv);
  50.        
  51.         //add event handlers
  52.         ae.onplay = function () {
  53.             document.getElementById('test').innerHTML = 'Now playing #' + (i+1) + ' ' + songList[i];
  54.         };
  55.         ae.onended = function(){
  56.             NextSong();
  57.         };
  58.         btnPlay.onclick = function() {
  59.             if (ae.paused) ae.play();
  60.             else ae.pause();
  61.         };
  62.         btnPrev.onclick = PrevSong;
  63.         btnNext.onclick = NextSong;
  64.         ae.play();
  65.        
  66.         function PrevSong() {
  67.             i = (i > 0)? i - 1 : songList.length - 1; // choose previous index
  68.             ae.setAttribute("src", songList[i]);
  69.             ae.play();
  70.         }
  71.         function NextSong() {
  72.             i = (i < songList.length - 1)? i + 1 : 0; // choose next index
  73.             ae.setAttribute("src", songList[i]);
  74.             ae.play();
  75.         }
  76.        
  77.         // flash fallback for IE8 and others old browsers without audio tag or mp3 playback support.
  78.         // Download the plugin here: http://wpaudioplayer.com/standalone/
  79.         // Additional info here:
  80.         // http://matt.coneybeare.me/getting-html5-audio-tag-and-flash-fallback-to/
  81.         // http://stackoverflow.com/questions/11681856/html5-audio-tag-flash-fall-back/
  82.         // http://stackoverflow.com/questions/17387702/html5-audio-song-only-playing-first-2-in-array
  83.         AudioPlayer.setup("audio-player/player.swf", { width: 290 });
  84.         if (!(!!(ae.canPlayType) && ("no" !== ae.canPlayType("audio/mpeg")) && ("" !== ae.canPlayType("audio/mpeg")))) {
  85.             AudioPlayer.embed("audioplayer", {
  86.                 soundFile: songList.join(','),
  87.                 loop: "yes",
  88.                 autostart: "yes",
  89.                 width:0
  90.             });
  91.         }
  92.     }, false);
  93. //]]>  
  94. </script>
  95. </head>
  96. <body>
  97. <div id="audiocontainer"></div>
  98. </body>
  99.  
  100. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!