Installing Audio Onto Your Website


There are several ways you can embed audio into your webpages. We suggest having your website developer perform this installation for best results.  If you with to try to modify your own webpages to embed audio... 
we suggest the following methods.

As Tel-Ad productions is not a website development company, we cannot guarantee the results. This are just two ways we have found which seems to give good cross platform/browser compatibility.

Using HTML5
If your website has been created using HTML5, inserting audio is simple.  Add the following to the code of your page where you would like the audio controls to appear:
<audio controls>
<source=src="filename.mp3" type="audio/mpeg">
</audio>
Where filename.mp3 is the name and location of your file.  If the file is in your website root directory, just use the filename.  If it is in a folder "audio" that resides in your root directory, use "/audio/filename.mp3".  

For example if you have a file named "intro_page.mp3" in the audio folder in the root directory of your webpage, insert the following into the code for your webpage:
<audio controls>
<source src="audio/intro_page.mp3" type="audio/mpeg">
</audio>

If you would like the audio to automatically play when the page loads, change the first line to:

   <audio controls autoplay>

If you would like the audio to loop and start again when the clip has finished, add "loop" to the first line:

   <audio controls autoplay loop>



An alternative method of adding audio is to use a Flash player.  The downside to this is that iOS mobile devices do not support Flash and will not play the audio.  But if you aren't using HTML5, this is an option:


Using a Flash Player  
This method uses Adobe Flash. Your website visitor will need to have Flash installed on his/her computer to hear your audio.  But it is estimated that this includes 99% of internet-enabled desktops (http://www.adobe.com/products/player_census/flashplayer/). This method provides a controller where the user can adjust the volume and start and stop the audio.
To insert audio into a webpage using a Flash player, follow these instructions: (This method uses the Open Source WordPress Audio Player plugin from 1pixelout by Martin Laine).

(1) Click on the link above and download the .zip file from that site. Unzip the files and you will use two of them: player.swf (this is the audio player) and audio-player.js (this is the JavaScript). These files are located in the assets folder.

(2)  Create a folder at the root of your website and name it "audio".

(3) Upload the two files for the audio player (player.swf and audio-player.js) to the audio folder.

(4) Upload the MP3 files provided by Tel-Ad Productions to the audio folder.

(5) The files now reside at: www.yourwebsitename.com/audio/

(6) Insert the following code into your webpage in the location where you would like the player controller to appear, replacing the web address in red text with your website address. Also replace the red "audiosample.mp3" with the file name of the audio file you want to use on the specific webpage.

<script language="JavaScript" src="http://www.yourwebsitename.com/audio/audioplayer.js"></script>
​ <object type="application/x-shockwave-flash" data="http://www.yourwebsitename.com/audio/player.swf" id="audioplayer1" height="24" width="290">

​  <param name="movie" value="http://www.yourwebsitename.com/audio/player.swf">

​ <param name="FlashVars" value="playerID=audioplayer1&noinfo=yes&loop=no&autostart=yes&soundFile=http://www.yourwebsitename.com/audio/audiosample.mp3>

​ <param name="quality" value="high">

<param name="menu" value="false">

​ <param name="wmode" value="transparent">

​ </object>


(7)

The height and width variables (highlighted blue) can be modified to change the size of the player to suityour site.


(8) You can also modify the loop and autostart variables (highlighted blue) to yes or no depending if you want to loop your audio or if you do not want the audio to start automatically when the page loads (the user will need to click the play button).  


We suggest modifying your webpages on a test server before putting the pages onto your live server. We also suggest making backup copies of your current pages before modifying any. If you have difficulties, consult your website developer

    We also produce messages for...

    PowerPoint Presentations

    Voice-mail Systems

    Auto-Attendants

    In-Store Promotions

     

    Tel-AdProductions

    On Hold Advertising since 1984