Web Design Training courses, videos & tutorials at DigitalFamily.com
Web design & Internet trends
books, videos, training & consulting
  • Home
  • Store
    • Web Design Books
    • Dreamweaver Videos
    • Expression Web Videos
    • Products
    • Shopping Cart
    • Order Status
  • Consulting Services
  • Web Tutorials
    • Web Design 101
    • Mobile and Responsive Web Design
    • Social Media
    • Online Reputation
    • Dreamweaver
    • Expression Web
    • Cascading Style Sheets
    • WordPress
  • Dreamweaver
    • CS6 Tutorials
    • CS5 Tutorials
    • CS4 Tutorials
    • CS3 Tutorials
  • FAQ
    • Dreamweaver
    • CSS
    • Graphics
    • WordPress
    • Ask the Author
  • About Us
    • About DigitalFamily.com
    • About Janine Warner
  • Contact
Search the site...
Home» FAQ » Dreamweaver » How do you insert audio files into a web page and where can you host audio files online?

How do you insert audio files into a web page and where can you host audio files online?

Posted by Janine Warner - August 25, 2012 - Dreamweaver, FAQ, Video, Web Design, Web Hosting, WordPress
0

Many people who want to host audio on their sites are surprised that it’s harder than hosting video.

If you’re not careful, audio inserted incorrectly won’t play at all in  most web browsers, or worse, your audio file will play automatically and there is no way to turn it off. Worse still, multiple audio files playing simultaneously. Not good.
The challenge with audio files is similar to the challenge with video, and you’d think audio would be simpler, but it’s not. If you’re confused by this you can blame it on all of the music pirates. There are many places to host videos for free, but hosting audio is surprisingly challenging by comparison.
If you were hosting video clips, I’d recommend YouTube or Vimeo, which enable you to upload videos in MP4 and other video formats and then simply embed a little code in your site to insert videos that play easily for your visitors using just about any web browser or device — and these services are free (or very reasonably priced in the case of Vimeo for businesses).
Hosting video on YouTube, Vimeo, or any of the other video sharing sites, gives you several advantages:
1. You save on hosting fees (video and audio files are much larger than text and images sand can get expensive to host on your own server)
2. Video hosting sites automatically convert video files for you and deliver your video in the best formats for each of your visitors based on the type of web browser, computer, or mobile device your visitor is using.
3. Video hosting sites have nice, clean players that make it easy for visitors to start, stop, rewind, etc.
So if you use Vimeo and YouTube to host video files, why can’t you do something similar with audio files?
The simple answer is that no one has created a YouTube-like solution for audio files, mostly because there is so much piracy in the world of music that few, if any sites, want to take the risk they will be used by music pirates.
So here’s a crazy solution many people are using to get around this seeming paradox and make hosting audio files as easy as it is to host video.
The first step is to turn your audio files into videos… the second step, if you’re jumping ahead, is to host your video/audio files on YouTube or Vimeo…
The good new is that converting audio files to video files is not as hard as you might imagine.
Simply create a new file in a video editor, such as iMovie or Adobe Premiere (Pro or Elements).
Next, place a still image, such a photo of the person signing the song in the audio file.
And finally,  import the audio file into the video editor.
The result, is that your audio will play like a video, and you can then save it as an MP4 (a recommended web video format), upload it to a video site (such as YouTube or Vimoe), and then embed the video code from the the video hosting site into your web page, complete with a video player.
The ultimate solution — a great audio player with one or more images for your visitors to look at while they listen to your audio file.
It’s not a perfect solution, but if your goal is to make it easy for visitors to listen to an audio file on your website with the option to stop, start, play, rewind, etc. and you want to host your audio file for free in a way that will work on mobile devices, desktop computers, and just about any web browser that might visit your site — this solution works.
As an alternative, you can host the audio files on your own web hosting service and set up any of a number of dedicated audio players to play the audio file on your own site. If you like that option better, consider searching for an audio player extension for Dreamweaver or some other way to host and play audio, such as a Flash player.
If you’re not sure how to add the embed code from YouTube or Vimeo into your web pages in Dreamweaver, this tutorial shows you how to copy code into code view in Dreamweaver.
Hope that helps,
Janine
dwcs3, dwcs4, dwcs5, dwcs6, web design, web hosting, wordpress

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Share with your friends

Recent Posts

  • How to change the width in a Dreamweaver drop-down menu created with a Spry Widget
  • Should I use a higher image resolution than 72 ppi for my photographs on the web?
  • How do I move my domain name?

Dreamweaver Tutorials

  • Creating websites with Dreamweaver HTML templates (.dwt)
  • What’s the difference between a website & blog?
  • 6 Reasons to Upgrade to Dreamweaver CS6
  • Tracking web traffic: Google Analytics vs other traffic counters
  • Creating Responsive Designs with Dreamweaver CS6 Fluid Grid Layout

Popular books & videos

  • Dreamweaver CS6 Video

    DW-Video-250
    Creating Responsive Designs for small and large screens with Fluid Grid Layouts
    Discover how to create web designs that look great on large and small screens. From smartphones to tablets to desktops, the new Fluid Grid Layout in version CS6 makes it easier than ever to set up media queries and design websites with HTML5 and CSS3. More Info »
    $49.99$39.99

    View Cart / Checkout
  • CSS Basics: A Refreshing Way to Learn Cascading Style Sheets

    CSS-Basics-DVD
    Training video DVD
    Whether you are completely new to designing with Cascading Style Sheets, or you really want to master the basics of CSS, Janine's crash course will get you up to speed quickly. More Info »
    $24.99

    View Cart / Checkout
  • Creating CSS Layouts: Getting More Advanced with Cascading Style Sheets

    CSS-Advanced-DVD-500
    Training Video DVD
    Dive deep and learn more advanced techniques with Cascading Style Sheets in Part 2 of Janine's CSS training series. More Info »
    $24.99

    View Cart / Checkout
© 2001 - 2013 All rights reserved. DigitalFamiliy.com was created by Janine Warner | Terms & Conditions of Use | Privacy Policy
  • Home
  • Store
  • Consulting Services
  • Web Tutorials
  • Dreamweaver
  • FAQ
  • About Us
  • Contact