A Pen by Stan Williams.

HTML5-Player-with-Flash-fallback-for-non-supporting-browsers..markdown

HTML5 Player with Flash fallback for non supporting browsers.

Implementing the HTML5 Audio Tag and the MP3 Player will fallback to the Flash player in those browsers that don't support the audio tag nor can play mp3 in it. Modified by: Stan Williams http://stans-songs.com and http://stanwilliamsmusic.com

MP3 sample is Last Trail, by: Stan Williams: http://www.stanwilliamsmusic.com and is licensed under http://creativecommons.org/licenses/by-nc-nd/3.0/

Attribution - NonCommercial - NoDerivatives

Download Last Trail.MP3 free here: https://soundcloud.com/stanwmusic/lasttrail-mp3

Download the .ogg file free here: https://archive.org/details/StanWilliamsLastTrail

---

Code samples are licensed under the Apache 2.0 License. http://www.apache.org/licenses/LICENSE-2.0

Flash MP3 player is from neolao production http://flash-mp3-player.net/ Download the MP3 player free here: http://flash-mp3-player.net/players/mini/download/

MP3 player license: The player is under the Creative Commons BY SA http://creativecommons.org/licenses/by-sa/3.0/deed.fr and MPL 1.1 license: http://www.mozilla.org/MPL/

You can use the player without citing the author. original author: http://www.html5rocks.com/en/tutorials/audio/quick/

A Pen by Stan Williams on CodePen.

License.

index.html

 <h3 id="toc-player-default">Player with default controls</h3>
      <audio id="audio_with_controls" controls>
        <source src="https://soundcloud.com/stanwmusic/lasttrail-mp3" type="audio/mpeg" />
        <source src="https://ia601903.us.archive.org/29/items/StanWilliamsLastTrail/StanWilliamsLastTrail.ogg" type="audio/ogg" />
        <object class="playerpreview" type="application/x-shockwave-flash" data="http://flash-mp3-player.net/medias/player_mp3_mini.swf" width="200" height="20">
          <param name="movie" value="http://flash-mp3-player.net/medias/player_mp3_mini.swf" />
          <param name="bgcolor" value="#222222" />
          <param name="FlashVars" value="mp3=https://soundcloud.com/stanwmusic/lasttrail-mp3" />
          <embed href="http://flash-mp3-player.net/medias/player_mp3_mini.swf" bgcolor="#085c68" width="200" height="20" name="movie" align="" type="application/x-shockwave-flash" flashvars="mp3=https://soundcloud.com/stanwmusic/lasttrail-mp3" />
        </object>
</audio><p>&nbsp;</p>
<div id="default_player_fallback"></div>

    <h3 id="toc-player-custom">Player with customized controls</h3>
    <audio id="audio">
      <source src="https://soundcloud.com/stanwmusic/lasttrail-mp3" type="audio/mpeg" />
      <source src="https://ia601903.us.archive.org/29/items/StanWilliamsLastTrail/StanWilliamsLastTrail.ogg" type="audio/ogg" />
      <object id="flash_obj" class="playerpreview" type="application/x-shockwave-flash" data="http://flash-mp3-player.net/medias/player_mp3_mini.swf" width="200" height="20">
        <param name="movie" value="http://flash-mp3-player.net/medias/player_mp3_mini.swf" /><param name="bgcolor" value="#222222" />
        <param name="FlashVars" value="mp3=https://soundcloud.com/stanwmusic/lasttrail-mp3" />
        <embed href="http://flash-mp3-player.net/medias/player_mp3_mini.swf" bgcolor="#222222" width="200" height="20" name="movie" align="" type="application/x-shockwave-flash" flashvars="https://soundcloud.com/stanwmusic/lasttrail-mp3" />
      </object>
    </audio>
    <div id="custom_player_fallback"></div>
    <div id="player" style="display: none">
      <button onClick="document.getElementById('audio').play()">Play</button>
      <button onClick="document.getElementById('audio').pause()">Pause</button>
          </div>

    
</script>

script.js

if (document.createElement('audio').canPlayType) {
  if (!document.createElement('audio').canPlayType('audio/mpeg') &&
      !document.createElement('audio').canPlayType('audio/ogg')) {
    swfobject.embedSWF("http://flash-mp3-player.net/medias/player_mp3_mini.swf",
                       "default_player_fallback", "200", "20", "9.0.0", "",
                       {"mp3":"https://soundcloud.com/stanwmusic/lasttrail-mp3"},
                       {"bgcolor":"#222222"}
                      );
    swfobject.embedSWF("http://flash-mp3-player.net/medias/player_mp3_mini.swf",
                       "custom_player_fallback", "200", "20", "9.0.0", "",
                       {"mp3":"https://soundcloud.com/stanwmusic/lasttrail-mp3"},
                       {"bgcolor":"#222222"}
                      );
    document.getElementById('audio_with_controls').style.display = 'none';
  } else {
    // HTML5 audio + mp3 support
    document.getElementById('player').style.display = 'block';
  }
}
 if (document.createElement('audio').canPlayType) {
        if (!document.createElement('audio').canPlayType('audio/mpeg') &&
            !document.createElement('audio').canPlayType('audio/ogg')) {
          swfobject.embedSWF("http://flash-mp3-player.net/medias/player_mp3_mini.swf",
                             "default_player_fallback", "200", "20", "9.0.0", "",
                             {"mp3":"https://soundcloud.com/stanwmusic/lasttrail-mp3"},
                             {"bgcolor":"#222222"}
                            );
          swfobject.embedSWF(http://flash-mp3-player.net/medias/player_mp3_mini.swf",
                             "custom_player_fallback", "200", "20", "9.0.0", "",
                             {"mp3":"https://soundcloud.com/stanwmusic/lasttrail-mp3"},
                             {"bgcolor":"#222222"}
                            );
          document.getElementById('audio_with_controls').style.display = 'none';
        } else {
          // HTML5 audio + mp3 support
          document.getElementById('player').style.display = 'block';
        }
      }

/*
Modified by: Stan Williams http://stans-songs.com and http://stanwilliamsmusic.com

MP3 sample is Last Trail by: Stan Williams: http://www.stanwilliamsmusic.com and is licensed under http://creativecommons.org/licenses/by-nc-nd/3.0/

Attribution - NonCommercial - NoDerivatives 

Download  Last Trail.MP3 free here:
https://soundcloud.com/stanwmusic/lasttrail-mp3

Download the .ogg file free here: 
https://archive.org/details/StanWilliamsLastTrail

------------------------------------------
Code samples are licensed under the Apache 2.0 License. http://www.apache.org/licenses/LICENSE-2.0

Flash MP3 player is from neolao production
http://flash-mp3-player.net/


Download the MP3 player free here:  http://flash-mp3-player.net/players/mini/download/

MP3 player license:
The player is under the Creative Commons BY SA http://creativecommons.org/licenses/by-sa/3.0/deed.fr
and MPL 1.1 license: http://www.mozilla.org/MPL/


You can use the player without citing the author.

originalcode author:
http://www.html5rocks.com/en/tutorials/audio/quick/
*/

style.css

h3 {
  font-family: 'Droid Sans', Arial, sans-serif;
  font-size: 14px;
}
body {background-color:#b0c4de;} 

Demo, preview, and edit live here : http://codepen.io/Stanssongs/pen/IzsvB/