Javascript required
Skip to content Skip to sidebar Skip to footer
Home / How to Enable Download From Html Audio Control Immediately

How to Enable Download From Html Audio Control Immediately

Disclosure: Your support helps keep the site running! We earn a referral fee for some of the services we recommend on this page. Learn more

When the web was born, it was a plain text environment consisting primarily of paragraphs, lists, and hyperlinks. Around 1993, the first graphical web browsers came on the market and visual elements such as pictures and graphics took center stage. The addition of audio and video content followed quickly on the heels of images. However, because support for these types of media was not built into to the HTML specification, browser plugins were used to power media playback.

Contents

  • 1 Modern Media on the Web: HTML5 <audio> & <video>
    • 1.1 HTML5 <audio>
    • 1.2 HTML5 <video>
    • 1.3 Using <source> to Provide Multiple File Formats
    • 1.4 Supported File Formats
      • 1.4.1 Selecting File Formats for Audio Files
      • 1.4.2 Selecting File Formats for Video Files
    • 1.5 Using <track> to Add Subtitles
  • 2 Embedding Externally Hosted Media
    • 2.1 Using <iframe> to Embed Media
    • 2.2 When to Use <iframe> vs. HTML5 <video> or <audio>
  • 3 The Past: Plug-In Powered Media Playback
    • 3.1 <object> vs <embed>
    • 3.2 Adding a Flash File with object
  • 4 Closing Thoughts
  • 5 Related Elements
  • 6 Tutorials and Resources

Modern Media on the Web: HTML5 <audio> & <video>

With the release of HTML5, the need for browser plugins for audio and video content began to go away. HTML5 introduced two new elements that include playback functionality for supported media formats. These two new elements are audio and video. In this tutorial we'll cover how to use the new tags, the media formats supported by these tags, and how to use the iframe element to embed media files hosted on an external website.

HTML5 <audio>

The audio element can be used to add audio content to a web page. Files embedded in this way are played by the audio playback engine built into all HTML5 compliant browsers. The syntax can be very simple, or it can be made more complex by adding in multiple file formats as well as fallback options for unsupported browsers.

At a minimum, to use the audio element the following attributes must be used:

  • src defines the URL where the audio content is hosted.
  • type defines the file format.
  • controls must be specified or no visual element will appear to control playback of the content.

A closing audio tag must be used, and additional content may optionally be nested between the opening and closing tags. In the code below, the text between the tags would appear in the event that the browser viewing the web page did not support the audio element.

Note that we've also provided attribution to satisfy the requirements stipulated by the publisher of this audio clip.

          <!--Simplest syntax--> <audio src="https://archive.org/download/ReclaimHtml5/ReclaimHtml5.mp3"    type="audio/mpeg"    controls>   I'm sorry. You're browser doesn't support HTML5 <code>audio</code>. </audio> <p>This is a recording of a talk called <cite>Reclaim HTML5</cite> which was    orinally delivered in Vancouver at a    <a href="http://www.meetup.com/vancouver-javascript-developers/" taget="_blank">   Super VanJS Meetup</a>. It is hosted by <a href="https://archive.org/details/ReclaimHtml5"    target="_blank">The Internet Archive</a> and licensed under    <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">   CC 3.0</a>. </p>

Now let's see how this element renders in the browser. Keep in mind, that you'll need to be using a modern browser to see the element controls and to hear the clip. If you are using an unsupported browser, you will see a message letting you know that your browser does not support the audio element.


This is a recording of a talk called Reclaim HTML5 which was orinally delivered in Vancouver at a Super VanJS Meetup. It is hosted by The Internet Archive and licensed under CC 3.0.

There are several other attributes that may be optionally added to the audio element including:

  • autoplay: If this attribute is used, the audio will begin to play as soon as enough has been downloaded to begin playback.
  • loop: When this attribute is present the audio file will automatically start over once it has played through.
  • muted: If you want audio content to be muted when initially loaded, use this attribute.
  • preload: This element can be used with the value none, metadata, or auto to tell the browser how much of the audio file to preload. Note that if autoplay is applied to an audio element it will override the preload attribute.

HTML5 <video>

The video element follows the same basic syntax as the audio element. In it's most basic form, all we need to do is use the src element to identify the video URL and add the controls attribute so that our website visitors can control video playback. We're also going to use the width and height attributes to set the size of the video player, but this is optional.

          <!--Basic syntax--> <video width="640" height="480" src="https://archive.org/download/Popeye_forPresident/Popeye_forPresident_512kb.mp4" controls>   Sorry, your browser doesn't support HTML5 <code>video</code>, but you can   download this video from the <a href="https://archive.org/details/Popeye_forPresident" target="_blank">Internet Archive</a>. </video>

As long as a website visitor's browser supports the video element and is capable of playing an .mp4 file they will be able to play the video in their browser. If their browser doesn't support the video element or the file format provided they will see a message providing a link where they can download the video.

Here's a look at how this code renders.

You may have noticed that we did not include any attribution with this video. That is because this video hosted by the Internet Archive was published in 1956 and has passed into the public domain. Therefore, no attribution is required.

There are several additional attributes which can be used to influence how video content is loaded and appears in the browser. These attributes include:

  • autoplay : If this attribute is used, the video will begin to play as soon as enough of the video has been downloaded to begin playback.
  • loop : When this attribute is present the video will automatically start over once it has finished playing.
  • muted : If you want the audio content of the video to be muted use this attribute.
  • preload : This element can be used with the value none, metadata, or auto to tell the browser how much of the video file to preload. Note that if autoplay is applied to a video element it will override the preload attribute.
  • poster : Use this attribute to select an image to display as the poster for the video until playback begins.

Using <source> to Provide Multiple File Formats

The source element can be used along with the audio or video element to specify more than one file format. When more than one format is provided, the browser selects the format best suited to the visitor's device. When the source element is used, it replaces the src attribute.

Providing multiple formats is a good idea because not all browsers can play back all file formats. By providing multiple formats, you increase the chances that every visitor to your site will be able to view or listen to the media content on your site.

Here's an example of how we could use the source attribute to provide two different formats of the same audio file.

          <!--Adding more than one version of the file--> <audio controls>   I'm sorry. You're browser doesn't support HTML5 <code>audio</code>.   <source src="https://archive.org/download/ReclaimHtml5/ReclaimHtml5.ogg" type="audio/ogg">   <source src="https://archive.org/download/ReclaimHtml5/ReclaimHtml5.mp3" type="audio/mpeg"> </audio> <p>This is a recording of a talk called <cite>Reclaim HTML5</cite> which was orinally delieved in Vancouver at a <a href="http://www.meetup.com/vancouver-javascript-developers/" taget="_blank">Super VanJS Meetup</a>. It is hosted by <a href="https://archive.org/details/ReclaimHtml5" target="_blank">The Internet Archive</a> and licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">CC 3.0</a>.</p>

Note that we're still using the controls attribute, but that all other information has been removed from the audio tag. Instead, we now have two source elements, each with an src attribute pointing to a file URL, and a type attribute telling the browser the type of file that is being served up.

Here's how the code renders:


This is a recording of a talk called Reclaim HTML5 which was orinally delieved in Vancouver at a Super VanJS Meetup. It is hosted by The Internet Archive and licensed under CC 3.0.

The source attribute can also be used for video elements. If the video file is available in multiple formats, all of the available formats can be added by removing the src attribute from the video element and using the source element multiple times between the opening and closing video tags.

          <video width="640" height="480" controls>   Sorry, your browser doesn't support HTML5 <code>video</code>, but you can   view this video by visiting the <a href="https://archive.org/details/Popeye_forPresident" target="_blank">Internet Archive</a>.   <source src="https://archive.org/download/Popeye_forPresident/Popeye_forPresident_512kb.mp4" type="video/mp4">   <source src="https://archive.org/download/Popeye_forPresident/Popeye_forPresident.ogv" type="video/ogv">   <source src="https://archive.org/download/Popeye_forPresident/Popeye_forPresident.mpeg" type="video/mpeg"> </video>

Here's how the video code with multiple source elements renders:

When the source element is used to provide multiple file formats, the visitor viewing the website is not provided the opportunity to pick between the different file formats. Instead, the browser does the work of determining which format is best suited to the viewers browser and device, and serves up that version automatically.

Supported File Formats

A variety of different video and audio file formats can be used along with these HTML5 elements. However, support for different formats varies from one browser to the next.

Selecting File Formats for Audio Files

There are four audio formats with broad browser support. While support for other formats is available on a more limited basis, these four formats are the ones commonly used for delivering audio content to the web browser.

  • Wav files are very high quality but also very large.
  • The MP3 format is much smaller than Wav, but it is a proprietary format and quality issues become apparent at low bitrates.
  • AAC format is similar to the MP3 in that it is a proprietary format. It performs better at bitrates above 100kbps.
  • Ogg is an open-source standard, making it popular with developers, and sound quality is much better at low bitrates than MP3.

The MP3 and AAC file formats are supported by nearly all browsers. However, given the proprietary nature of both MP3 and AAC formats, and the fact that Ogg files sound better at low bitrates, developers and content curators tend to prefer the Ogg format.

Most browsers already support Ogg, and those that don't can be expected to add support in the future. As a result, when dealing with audio content, it makes the most sense to provide an Ogg format file as the first option, with an MP3 or ACC fallback option. Wav is only recommended for instances where the quality of the recording is critical.

Selecting File Formats for Video Files

There are two leading video file formats which can be used with the video element and are supported by most web browsers:

  • WebM is a newer open-source format developed by Google.
  • MP4 higher quality and broader browser support than WebM.

If you're only going to offer one type of video, go with the MP4 format since it has near universal compatibility with both desktop and mobile browsers. However, since WebM is built on open-source technologies, over time it should catch up to MP4 in terms of browser support, and may one day be the dominant format for delivering video over the web.

Using <track> to Add Subtitles

The track element can be added as a child to any audio or video element to link a timed text file to the media content. The file linked with the track element must be formatted in WebVTT format. Quite often more than one track file is added to a video or audio element to provide captions or subtitles in multiple languages.

The kind attribute is used to specify what type of data is contained in the attached file. Values that can be applied to the kind attribute include subtitles, captions, descriptions, chapters, and metadata.

Other attributes that may be used with the track element include:

  • label: Used to add a label to help users identify the track best suited to meet their needs.
  • src: Identifies the URL of the track file.
  • srclang: This attribute is required if the kind attribute is set to subtitles and identifies the language of the subtitles contained in the associated track file.

Here is an example of how the track element is added as a child of a video element:

          <video width="640" height="480" controls>   Sorry, your browser doesn't support HTML5 <code>video</code>.   <source src="video_url.mp4" type="video/mp4">   <source src="video_url.ogv" type="video/ogv">   <track kind="subtitles" src="english_captions.vtt" srclang="en" label="English">   <track kind="subtitles" src="spanish_captions.vtt" srclang="es" label="Spanish"> </video>

Embedding Externally Hosted Media

The audio and video HTML5 elements are a great help to webmasters and content creators who want to host media files on their own server or hosting account. However, content added to a webpage with the 'audio' or 'video' elements relies entirely on the browser's native playback capabilities.

There are many providers of audio and video hosting who do an excellent job of optimizing media playback in a way that provides better performance than the native HTML5 elements. Take a website like YouTube for example. YouTube has created a video player that employs HTML5 by default, includes a flash-based fallback for unsupported browsers, adjusts the video quality based on the viewers connection speed, and provides for buffering and smooth streaming.

The same is true of audio content distributors such as Soundcloud and Spotify.

Native playback of audio and video content is not yet as good as playback services provided by companies that specialize in streaming media.

As a result, if you want to add media content from a website like YouTube, SoundCloud, Spotify, The Internet Archive, Vimeo, or any other leading provider of streaming media, you should first determine if the provider offers an easy way to embed their native media player. The reason for this is that when you embed the content provider's media player, your visitors receive the optimization benefits the content provider has built into their media player.

Using <iframe> to Embed Media

The video embedded above is hosted by The Internet Archive who also provides a media player which can be embedded with an iframe element. Here's the code to embed the same video making use of The Internet Archive's video player:

          <iframe src="https://archive.org/embed/Popeye_forPresident"    width="640" height="480" frameborder="0" allowfullscreen> </iframe>

As you can see below, if we render the video using this code the media player looks a little different and playback performance is improved.

Spotify is another service that uses iframes to embed media content. Here's what the code for embedding a Spotify audio file looks like:

          <iframe src="https://embed.spotify.com/?uri=spotify%3Atrack%3A4Jzhluc2ZWHgA8ijEMP1HJ" width="300" height="380" frameborder="0" allowtransparency="true"></iframe>

If we render that code, we don't just get a set of simple audio element controls. Instead, we get a Spotify audio player embedded in our website.

YouTube has fully embraced the use of iframes to embed content, to the point that in January of 2015 they announced that they were deprecating support for other methods of embedding YouTube hosted content. To get an embed code for a YouTube video, simply navigate to the video you want to embed, open the contextual menu (right-click on a PC, or Ctrl and click on a Mac), and select "Copy embed code". When you do this, code that looks like what you see below will be copied to your clipboard.

          <iframe width="854" height="480"    src="https://www.youtube.com/embed/M7lc1UVf-VE"    frameborder="0" allowfullscreen> </iframe>

That's pretty straightforward code that loads a YouTube video player embedded in a webpage like this:

It's important to understand that when you load a media player such as YouTube's video player you are ultimately using the same browser resources as when you embed a video using the native HTML5 video element. The difference is that YouTube engineers have created a video player that takes into account things like the speed of your Internet connection to automatically adjust video quality on-the-fly. The result is that unless you are an exceptional Internet-video engineer you won't be able to duplicate YouTube's results.

When to Use <iframe> vs. HTML5 <video> or <audio>

If you want to offer short video or audio clips that you own on your site, the audio and video elements provide an easy way to host these files on your own server and serve them up to your website visitors. However, if the files you want to add to your site are hosted by a website like YouTube that offers an embed script, you should use it and let that site handle playback.

In addition, if the clips you plan to add are very long, or if you expect heavy traffic, your website visitors will probably have a better experience if you upload your media file to a service like YouTube of Vimeo and embed the videos using iframes.

There are a few different reasons why this is true:

  • The media player embedded through the use of an iframe generally includes fallback formats for visitors using older browsers. You can certainly add fallback options yourself, but letting someone else do it for you is easier and faster.
  • Content hosting providers have designed their content to be shared in this way. Using another method may not work at all, may break as configuration settings change, or may violate the content provider's terms of service.
  • The media player provided by content hosting providers usually includes buffering and streaming optimization techniques that take into account the viewer's internet connection speed and produce a better viewing or listening experience.

Keep in mind that the iframe element can be used for a lot more than embedding a media hosted at another site. To learn more about this flexible and useful element, visit the iframe documentation page.

The Past: Plug-In Powered Media Playback

Adobe Flash and Quicktime are two browser plugin technologies that were popular in the past and are still used to power media content on the web, including playback of audio and video. Prior to the HTML5 audio and video elements, if you wanted to add media content to your site, you had no option other than to use a plugin.

While support for Flash and Quicktime is broad on desktop computers and laptops, the same cannot be said for mobile devices. In addition, there is a push in the development community to get away from using browser plugins entirely. Using plugins to deliver media content is no longer necessary for visitors using a modern browser, but many websites still offer a flash-based fallback for visitors using very old browsers.

<object> vs <embed>

Plugin content can be added to a webpage using either the object or embed element. Both elements are supported by modern browsers, and perform similar functions. This can lead one to question whether both are even needed.

In most cases, the choice of using one or the other is trivial, and since there is at least once instance of limited browser suppport for embed, our recommendation is to learn how to use object and to stick with it until such time when the HTML specification evolves and these two elements are (hopefully) consolidated.

Adding a Flash File with object

Basic syntax of the object element is straightforward. An opening tag is used, and three values are usually specified:

  • [Width] and [height]: To define how large the embedded content should be.
  • [Data]: To identify the URL where the content is located.
  • [Parameter]: Used by Internet Explorer and Safari to identify the file location in place of the data attribute.
          <object width="" height="" type="application/x-shockwave-flash" data="flash_file.swf">   <param value="flash_file.swf"> </object>

You can use this exact syntax to add a flash fallback to a video element for users of unsupported browsers. Here's how a video element would look with a flash fallback file added.

          <video width="640" height="480" controls>   <source src="video_url.mp4" type="video/mp4">   <source src="video_url.ogv" type="video/ogv">   <object width="" height="" type="application/x-shockwave-flash" data="flash_file.swf">     <param value="flash_file.swf">   </object>   <track kind="subtitles" src="english_captions.vtt" srclang="en" label="English">   <track kind="subtitles" src="spanish_captions.vtt" srclang="es" label="Spanish"> </video>

In addition to offering a flash fallback, to provide complete accessibility it is a good idea to provide a link to one or more downloadable copies of the video or audio file. A full explanation of this technique is available from Camen Design.

Closing Thoughts

Web browsers started as simple plain-text processing machines and over time they have grown into extremely flexible programs which can handle everything from text and hyperlinks, to images, audio files, and videos. The addition of the video and audio elements to the HTML5 specification is evidence of the fact that the humble web browser isn't done evolving yet, and that creating a rich media experience is actually getting easier as dependence on browser plugins is reduced.

Jon is a freelance writer, travel enthusiast, husband and father. He writes about web technologies such as WordPress, HTML, and CSS.

How to Enable Download From Html Audio Control Immediately

Source: https://html.com/media/