AAC or MP3 Audio Embed

JW Player supports playback of multiple media formats: video files, audio files, YouTube videos, RSS playlists and adaptive streams. This article explains how to embed a basic audio file. Here is an example:

 

 

 

Although this example uses an AAC audio file (in MP4 container), MP3 audio is equally well supported across all desktop browsers (Chrome, Firefox, Internet Explorer, Safari) and mobile devices (iOS, Android). Other file formats (like Ogg Vorbis or Shoutcast) do not play everywhere, so you should stick to AAC or MP3.

Step 1: Add the library to your <head>

In order to embed media with JW Player, you first have to add the player library to the head of your HTML page (or elsewhere above the actual embed). The player library can be found in your JW Player account and looks like this:

<script src="http://jwpsrv.com/library/YOUR_JW_PLAYER_ACCOUNT_TOKEN.js" ></script>

The JW Player library is Cloud-Hosted by us, making it fast & reliable, secure and always up-to-date with the latest mobile devices and web standards. If you want to host the player library yourself (e.g. if you have an intranet), you should download the Self-Hosted version of JW Player from the account. There's no functional difference between the two.

Don't forget to change the domain to https://ssl.jwpsrv.com if you require secure hosting of the player library.

Step 2: Add the embed code to your <body>

With the player library set up, it's time to actually embed the audio. Therefore, insert this HTML in your page, at the exact location you want the player to appear:

<div id="myElement"></div>

<script>
    jwplayer("myElement").setup({
        file: "http://example.com/uploads/myAudio.m4a",
        width: 640,
        height: 30
    });
</script>

In this code, the <div> element is used as a container to load JW Player into. It must have a unique id attribute. The setup() block defines which audio file to load, as well as the width and height of the player in pixels. If you make the player higher, it will jump out of audiobar mode, allowing you to set an artwork image with an additional image configuration option.

Two common issues prevent smooth playback of videos in Internet Explorer 9+. First, always start your HTML document with <!DOCTYPE html> to prevent triggering IE's quirks mode. Second, serve up your AAC audio with the audio/mp4 mimetype or IE will refuse to play them.

Next Steps

With this basic embed live, you can look into adding customizations like a different player skin, responsive design support or playing full audio podcasts. See the Customization section for more information.

If things are not yet working out, see our troubleshooting guide for a list of common embedding issues.

Please sign in to leave your feedback for this article.

Still don't have JW Player? Get It Here