Simple custom play button for multiple HTML songs

Question

All I want to do is post a few songs on my page, where the user clicks on the user image that I created. I don’t want to use Flash, because I want it to work on iPad and iPhone. But I want to create a nice play button, not a standard console.

Thanks!!!

Answer 1

Check out this example . It uses HTML5 audio tags

HTML

 <a onclick="this.firstChild.play()" class="button"> <audio src="http://upload.wikimedia.org/wikipedia/commons/a/a9/Tromboon-sample.ogg"> </audio> &#9658;</a>​ 

This works for a large number of audio files that you want to play. See this example , which uses several sources.

See this example , which has been updated for aesthetics.

Answer 2

You can use the AUDIO element for modern browsers. For IE8 and older, you can try using BGSOUND and / or Flash fallback.

Answer 3

here is an example of how to start playing sound using custom icon images .. this method uses jPlayer, so it's cross-platform. Check it out on this fiddle: http://jsfiddle.net/75lb/XPkTz/

markup example:

 <div id="audio"></div> <a href="http://www.freesfx.co.uk/rx2/mp3s/3/2665_1315685839.mp3"> <img src="http://icons.iconarchive.com/icons/creative-freedom/shimmer/48/Play-icon.png" /> </a> <a href="http://www.jplayer.org/audio/mp3/Miaow-07-Bubble.mp3"> <img src="http://icons.iconarchive.com/icons/creative-freedom/shimmer/48/Play-icon.png" /> </a> 

and script:

 $("#audio").jPlayer({ swfPath: "http://www.jplayer.org/latest/js/Jplayer.swf", supplied: "mp3" }); $("a").click(function(e) { $("#audio").jPlayer("setMedia", { mp3: this.href }).jPlayer("play"); e.preventDefault(); });​ 

don't forget to make sure jQuery and jPlayer are loaded on your page:

 <script type='text/javascript' src='http://code.jquery.com/jquery-1.6.4.js'></script> <script type='text/javascript' src="http://www.jplayer.org/latest/js/jquery.jplayer.min.js"></script>