ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel

How to Add Music to a Web Page

Updated on March 22, 2013

Embedding music has become very easy over recent years, especially with the option of third party hosting options where you don't have to worry about having your own web space. Most of them are even free to upload to, if you're only using them casually.

First decide between hosting your own file and using HTML, Javascript, Flash and uploading to a third party website like BandCamp or SoundCloud. Here's a quick table comparing your options.

 
HTML Code
Third Party Website
Javascript and Flash
Fully Customizable
yes
no
yes
Webspace
uses your web space
uses their space
use your space
Cost
included in most web hosting plans
free - up to a certain point, depending on site
depends on player
Difficulty
medium
easy
medium-hard
Simple HTML music player
Simple HTML music player | Source

HTML Music Player

If you have your own website and can easily upload your own track to your site, this option is great for customizing and avoiding any third party plugins or embed codes to clutter your site.

This will use your own webspace to host the file, however you have full control over the size and how it plays. There's not much security with this option as anyone who can read your HTML could easily find the path to your music track.

To use this code, all you need to do is copy and paste it and change a few values.

HTML Code for Music on Webpage

<object width="xxx" height="xx">
<param name="src" value="yoursoundfile.mp3">
<param name="autoplay" value="false">
<param name="controller" value="true">
<param name="bgcolor" value="#ffffff">
<embed src="yoursoundfile.mp3" autostart="false" loop="false" width="xx" height="xxx" controller="true" bgcolor="#ffffff"></embed>
</object>

HTML Color Codes Chart

http://www.immigration-usa.com/html_colors.html

You can also use an image editing software like Photoshop, GIMP or Paint Shop Pro to find a specific color. Usually you can find this by selecting a color with the eyedropper or opening up the color selection palette.

How to Customize It

  1. First decide what size you want your player to do be and edit both the width and height on lines 1 and 6. Replace the "xxx"s and "xx"s with your chosen value. A good starting point is 100 for width and 50 for height.
  2. Change the yoursoundfile.mp3 to the location of your audio file. You'll have to upload your music track to your server for this to work. An example would be: sound/track1.mp3. Be sure to change the location on both lines 2 and 6.
  3. If you want your track to automatically play, change "false" to "true" on line 3 and 6.
  4. You can change the area around the player by changing the hex decimal (#ffffff), which is currently set to white on line 5.

Professional Tip
Avoid using the autoplay function when embedding music files. A lot the time people have their own music playing while browsing. Don't annoy your visitors by having music play automatically and then make them hunt down the switch to turn it off!
Embedding options on Sound Cloud
Embedding options on Sound Cloud | Source

Third Party Embedding Options

This is probably one of the easiest ways to add music to your webpage. You don't have to worry about using your webspace or bandwidth, however you are often limited to how the player will look, depending on how the website displays their music player on your site.

A couple of the more popular sound hosting websites are:

Free Sound Project - more for sound effects and loops, based on Creative Commons licensing, community based.

Band Camp - more of a professional platform for bands wanting to sell their music.

Sound Cloud - A mix between the two, but more community based than Bandcamp.

Of course there are many, many other options out there, these are just three of the ones that I've personally had experience with.

Embedding Music Onto Your Page

After you have your music, song or sound effect on your chosen website of choice, getting the embed code is usually very simple and comes with different options to help you customize and fit it into the space you want it to go.

  1. Upload your music onto a third party website like Sound Cloud.
  2. Once uploaded, go to your music track's page, usually you just click on the track in your profile.
  3. You should see a button or link that says "share". Click on this and you'll see the option to copy an embed code. Look to see if there are options such as size (width and height), color, autoplay, etc). If so, customize them to how you'd like them to appear.
  4. Copy the embed code after you're done customizing.
  5. Open your page or program and paste your embed code into the space you want it to appear.
  6. Check out how it looks on your webpage. If you don't like how it looks, go back and try out the other customization options.

Embedded Music Player from Free Sound Project
Embedded Music Player from Free Sound Project | Source

Javascript or Flash Music Player

There are many players available, some paid and some free. When dealing with javascript there is always tweaking that needs to be done to the design to customize it and troubleshoot the code. Be sure that you're willing to put the time and effort into it.

You'll have the most options for customization and control over your music player. Some even allow you to create a music box, with multiple tracks and playlists.

Here's a short list of some of the players that are available for free. Each link will bring you to the website to download the code and give you specific instructions for installing each.

Free Javascript and Flash Music Players

SM Music Player - A good option for creating music with files from YouTube and SoundCloud. You building the music player on the website, so there's no HTML or code editing. Simply copy and paste.

Flowplayer - This one you'll have to download the files and install them on your website. This one will be more difficult to set up, but it also allows you to stream video off your website and is very versatile.

Audio Play - A very simple audio player that has a single button that is used to play the file. This one also has an online editor so you don't have to touch the coding.


Comments

    0 of 8192 characters used
    Post Comment

    • Reginald Thomas profile image

      Reginald Thomas 

      3 years ago from Connecticut

      Great article Noelle. I enjoyed reading it. I hope to use your information later as I've always wanted to put audio/music files in an article.

      Thanks

      Reg

    working

    This website uses cookies

    As a user in the EEA, your approval is needed on a few things. To provide a better website experience, hubpages.com uses cookies (and other similar technologies) and may collect, process, and share personal data. Please choose which areas of our service you consent to our doing so.

    For more information on managing or withdrawing consents and how we handle data, visit our Privacy Policy at: https://hubpages.com/privacy-policy#gdpr

    Show Details
    Necessary
    HubPages Device IDThis is used to identify particular browsers or devices when the access the service, and is used for security reasons.
    LoginThis is necessary to sign in to the HubPages Service.
    Google RecaptchaThis is used to prevent bots and spam. (Privacy Policy)
    AkismetThis is used to detect comment spam. (Privacy Policy)
    HubPages Google AnalyticsThis is used to provide data on traffic to our website, all personally identifyable data is anonymized. (Privacy Policy)
    HubPages Traffic PixelThis is used to collect data on traffic to articles and other pages on our site. Unless you are signed in to a HubPages account, all personally identifiable information is anonymized.
    Amazon Web ServicesThis is a cloud services platform that we used to host our service. (Privacy Policy)
    CloudflareThis is a cloud CDN service that we use to efficiently deliver files required for our service to operate such as javascript, cascading style sheets, images, and videos. (Privacy Policy)
    Google Hosted LibrariesJavascript software libraries such as jQuery are loaded at endpoints on the googleapis.com or gstatic.com domains, for performance and efficiency reasons. (Privacy Policy)
    Features
    Google Custom SearchThis is feature allows you to search the site. (Privacy Policy)
    Google MapsSome articles have Google Maps embedded in them. (Privacy Policy)
    Google ChartsThis is used to display charts and graphs on articles and the author center. (Privacy Policy)
    Google AdSense Host APIThis service allows you to sign up for or associate a Google AdSense account with HubPages, so that you can earn money from ads on your articles. No data is shared unless you engage with this feature. (Privacy Policy)
    Google YouTubeSome articles have YouTube videos embedded in them. (Privacy Policy)
    VimeoSome articles have Vimeo videos embedded in them. (Privacy Policy)
    PaypalThis is used for a registered author who enrolls in the HubPages Earnings program and requests to be paid via PayPal. No data is shared with Paypal unless you engage with this feature. (Privacy Policy)
    Facebook LoginYou can use this to streamline signing up for, or signing in to your Hubpages account. No data is shared with Facebook unless you engage with this feature. (Privacy Policy)
    MavenThis supports the Maven widget and search functionality. (Privacy Policy)
    Marketing
    Google AdSenseThis is an ad network. (Privacy Policy)
    Google DoubleClickGoogle provides ad serving technology and runs an ad network. (Privacy Policy)
    Index ExchangeThis is an ad network. (Privacy Policy)
    SovrnThis is an ad network. (Privacy Policy)
    Facebook AdsThis is an ad network. (Privacy Policy)
    Amazon Unified Ad MarketplaceThis is an ad network. (Privacy Policy)
    AppNexusThis is an ad network. (Privacy Policy)
    OpenxThis is an ad network. (Privacy Policy)
    Rubicon ProjectThis is an ad network. (Privacy Policy)
    TripleLiftThis is an ad network. (Privacy Policy)
    Say MediaWe partner with Say Media to deliver ad campaigns on our sites. (Privacy Policy)
    Remarketing PixelsWe may use remarketing pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to advertise the HubPages Service to people that have visited our sites.
    Conversion Tracking PixelsWe may use conversion tracking pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to identify when an advertisement has successfully resulted in the desired action, such as signing up for the HubPages Service or publishing an article on the HubPages Service.
    Statistics
    Author Google AnalyticsThis is used to provide traffic data and reports to the authors of articles on the HubPages Service. (Privacy Policy)
    ComscoreComScore is a media measurement and analytics company providing marketing data and analytics to enterprises, media and advertising agencies, and publishers. Non-consent will result in ComScore only processing obfuscated personal data. (Privacy Policy)
    Amazon Tracking PixelSome articles display amazon products as part of the Amazon Affiliate program, this pixel provides traffic statistics for those products (Privacy Policy)