Audio Player on HTML (Advanced)

There are some different approaches to make easy on playing audio by third-part tools on your website.

Yahoo Media Player

Using the Yahoo player is free. To use it you insert this piece of JavaScript at the bottom of your web page:

<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>

Then you simply link to your MP3 files in your HTML, and the JavaScript code automatically creates a play button for each song:

<a href="song1.mp3">Play Song 1</a>
<a href="song2.mp3">Play Song 2</a>
...
...
...

The Yahoo Media Player presents your readers with a small play button instead of a full player. However, when you click the button, a full player pops up.

Note that the player is always docked and ready at the bottom the window. Just click on it to slide it out.

More information about this player you can check out the official website.

Google

Note that you need to change the audioUrl in above Javascript.

Javascript Control

<audio id="audiotag1" src="song.mp3" preload="auto"></audio>
<a href="javascript:play_single_sound();">Play</a> <!-- 呼叫javascript中的play_single_sound函式 -->
<a href="javascript:pause_single_sound();">Pause</a>
<script type="text/javascript">
 function play_single_sound() {
document.getElementById('audiotag1').play(); /* document.getElementById('audiotag1'): 抓取html元素中id名為audiotag的element。 並利用抓取到的物件呼叫play函式播放audio。 */
 }
 function pause_single_sound() {
document.getElementById('audiotag1').pause();
 }
</script>

上述javascript可簡單的用超連結控制音檔的播放而不使用播放器。

Sample website.

Lastest Updated: 2012/03/02