How to Embed Audio to Your Website
Add Audio to your website
METHOD 1: YouTube as Audio Player
1) Go to the YouTube video you would like to use for just audio.
2) Click the Embed button beneath the video.
3) Copy the code.
4) Login to your site as an admin.
5) Go to the editing section of the page you would like the audio file to be on.
6) Click on the HTML button for the Body text editor.
7) Paste the HTML code generated in between an appropriate area.
8) Change the height within the code to be "25".
9) Change the width within the code to be whatever you like ("300" or "400" should look normal).
10) Click Update.
11) Click Save page.
METHOD 2: Vimeo as Audio Player
1) Go to the Vimeo video you would like to use for just audio.
2) Click the Embed button on the right-side of the video.
3) Copy the code.
4) Login to your site as an admin.
5) Go to the editing section of the page you would like the audio file to be on.
6) Click on the HTML button for the Body text editor.
7) Paste the HTML code generated in between an appropriate area.
8) Change the height within the code to be "55".
9) The width within the code can be changed but should be fine as it is.
10) Click Update.
11) Click Save page.
NOTE: The pro of Vimeo is that videos can be unlimited in length. The con is that if there is an image (other than just a black picture), it will display behind the controls until the Play button is clicked upon.
METHOD 3: Instant Audio Player (Simple iFrame)
1) Go to: http://www.instantaudioplayer.com/ and sign up for free at the bottom of the page.
2) Confirm that you want their free audio player.
3) Wait a few minutes for an email. Once received, click on the link to confirm your registration.
4) Login to your site as an admin.
5) Upload the audio file as an Asset.
6) Once it is saved, right-click on the image of the audio asset, NOT THE TITLE OF THE AUDIO IMAGE. Then select copy link address.
7) Login to the Member area of instantaudioplayer.com.
8) Paste the link of the audio asset into the first field.
9) Click the button to generate a preview and HTML.
10) If the preview starts to play your audio file, it worked. Otherwise, you may need to reupload your audio asset again.
11) Copy the HTML.
12) Go back to your site as an admin.
13) Go to the editing section of the page you would like the audio file to be on.
14) Click on the HTML button for the Body text editor.
15) Paste the HTML code generated in between an appropriate area and change the "width" value to be 300 and the "height" value to be 50 (in the HTML code).
16) Click Update.
17) Click Save page.
METHOD 4: Sound Cloud
1) Go to Sound Cloud and find a song you want to put on your website.
2) Click on the Share button on the top-left corner of the audio you want.
3) Copy the embed code presented.
4) Login as the admin to your site.
5) Go to the editing portion of a page, blog, event, or an HTML side section.
6) Click on the HTML icon on the text editor. A window for HTML will appear.
7) Paste in the embed code and erase everything after "</embed>", unless you want the artist's name and song title beneath the audio clip.
8) Save page.
METHOD 5: Adobe Flash Player
1) Login as the admin to your site.
2) Upload the audio file as an Asset.
3) Once it is saved, right-click on the image of the audio asset, NOT THE TITLE OF THE AUDIO IMAGE. Then select copy link address.
4) Go to the editing portion of a page, blog, event, or an HTML side section.
5) Click on the HTML icon on the text editor. A window for HTML will appear.
6) Copy this code:
<embed type="application/x-shockwave-flash" wmode="transparent" src="http://www.google.com/reader/ui/3523697345-audio-player.swf?audioUrl=[MP3_file]" height="27" width="320"></embed>
7) Then paste this code into the HTML window.
8) Replace: [MP3_file]
With: Your copied link address from step 3.
9) Click Insert on the bottom of the HTML window.
10) Save page.
You now have an audio player for your site.
NOTE: You may also use video players to play your audio. You would likely want to made the width and height sizes of zero because otherwise it will show a black screen. Visit Embed Video to a Website
METHOD 6: Yahoo Media Player
1) Login as the admin to your site.
2) Place this code:
<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>
Into the Tracking Code under Settings > Template (tab). DO NOT REPLACE OR ERASE THE TRACKING CODE ALREADY IN THIS AREA. Place it a couple lines below it.
2) Upload the audio file as an Asset.
3) Once it is saved, right-click on the image of the audio asset, NOT THE TITLE OF THE AUDIO IMAGE. Then select copy link address.
4) Go to the editing portion of a page, blog, event, or an HTML side section.
5) Click on the HTML icon on the text editor. A window for HTML will appear.
6) Put this code into your HTML:
<a href="http://mediaplayer.yahoo.com/example1.mp3">First link</a>
Replace "http://mediaplayer.yahoo.com/example1.mp3" with the link address you copied from your audio asset. DO NOT REPLACE THE QUOTES.
7) You can replace "First link" with whatever you want to have the name displayed as.
8) You can add as many songs as you like and it will show them all under the Playlist that will be part of the music player.
NOTE: The interface looks great and is simple to use, however, there is no seek bar. This can cause problems for long tracks. There are "hacks" that allow you to add a seek bar and other options here:
http://www.onemanclapping.org/2009/04/hacking-yahoo-media-player.html
http://www.ccastig.com/2009/03/29/yahoo-media-player-hacks/
You can change other useful options with guidance from here:
https://www.rebelmouse.com/pianokeyboardlessons/ Learn Musical Keyboard - one of the best piano methods online - a product you can be Proud to have - 10 ebooks, 200 Videos, 500 Audio lessons - incredible genuine testimonials these details https://www.rebelmouse.com/pianokeyboardlessons/
One of the best article ever and impressive or informative inforamtion, thanks for shared and I really enjoyed to reading this post. http://shareitpcz.com/
One of the best article ever, making the best post or enjoyed to reading this post. http://cleanmasterforpc.com/