Different Ways to Play wav Sound from a Web Page

Different Ways to Play wav Sound from a Web Page

Popular content

Donate to Us


Donate by clicking Ads :)

Recent comments

Who's online

There are currently 0 users and 17 guests online.

Different Ways to Play wav Sound from a Web Page

There are many ways to embeded audio/video files on a web site. What we called "trend" is embeding flash player and play files, in my case I coudn't find any flash player to play wav files, but there are many mp3 flash players free and open source.

Follow following if you want to play any audio/video without using known flash, my self I also highly recommed to use flash, cause it is the standard today.

 

Using simple hyperlink you can allow browser to handle stream file play :) as simple like below

 <a href="mytone.wav">Play Sound</a> 

 

Embeding a file inside a HTML, to embeded you can use <embeded> or <object>

<embed src="mytone.wav" autostart=false loop=false> 
or 
<object type="audio/x-wav" data="mytone.wav"></object>  

Play using a Javascript

 
include this in your HEAD 
<script> 
function PlayAudio(audioFile) { 
var audioToPlay=document.getElementById(audioFile); 
audioToPlay.Play(); 
} 
</script> 
Add this to BODY 
<embed src="mytone.wav" autostart=false width=0 height=0 id="audio1" enablejavascript="true"> 
or  
<object type="audio/x-wav" data="mytone.wav" width=0 height=0 id="audio1" enablejavascript="true"></object> 


Add this to BODY (I used a button, but you can use image, link etc)

<form>
<input type="button" value="Play Audio" onClick="PlayAudio('audio1')">
</form> 

 

But if you play many files at the same time, above method is inefficient cause its loading all audio files, so taking too much bandwith.

 
Add this to HEAD 
<script> 
function AudioHtml(url) { 
document.getElementById("audio").innerHTML= '<object type="audio/x-wav" data="' + url+ '" hidden="true"></object>'; 
} 
</script> 
Add to body 
<span id=audio></span> 
<form> 
<input type="button" value="Play Sound" onClick="AudioHtml('mytone.wav')"> 
</form> 

 

Use jQuery media http://malsup.com/jquery/media/

 

 

Share/Save
6
Average: 6 (2 votes)
Your rating: None
Comments

Post new comment

 
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.

More information about formatting options

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.