AAC or MP3 Audio Embed

This article goes over the standard JW Player embedding practices for audio files. For more specific information on JW Player's audio playback capabilities, see our audio section in the Media Reference page.

Example

The below JW Player embed is using an audio file with a minimum height of 40 pixels configured. The player will go into Audio Mode which will hide the player's video display, as well as other non-essential control bar items like fullscreen.

 

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.

Embedding Step-by-Step

Above, we have embedded a JW Player to show its functions and appearance. However, to embed a player on your own web page, please see the following steps:

Step 1: Configuring your JW Player Library

JW Player offers two options for configuring your player's library on your web page:

Option A: Add a 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). Player libraries are found in your embedding wizard and will set player defaults according to what is specified in the Wizard. A player's library will appear similarly to:

<script src="http://content.jwplatform.com/libraries/eX4mp13.js"></script>

Note: The above library can be reached via HTTPS by changing http to https in the URL

JW Player libraries are cloud-hosted by us, making them fast, reliable, secure, and always up-to-date with our latest releases. In addition, all configuration is performed with our easy-to-use graphical interface via our Dashboard.

Option B: Self-hosting

If you want to host your own player library, you can find both your license key and latest JW Player files in your dashboard's Advanced Account page. Once downloaded, you will need to host jwplayer.js on your own server. When configuring your web page, you will then need to point to your copy of jwplayer.js and also define your self-hosted license key. Here's a code example:

‚Äč<script src="http://mywebsite.com/jwplayer/jwplayer.js" ></script>
<script>jwplayer.key="ABCdeFG123456SeVenABCdeFG123456SeVen==";</script>

Note: JW Player 7 now requires a license key. Please make sure to include this on your page if you are self-hosting.

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

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

<div id="myElement">Loading the player...</div>
<script type="text/javascript">
var playerInstance = jwplayer("myElement");
playerInstance.setup({
	file: "http://example.com/uploads/myVideo.m4a",
	width: 640,
	height: 40
});
</script>

Step 3: Configuration

In this above code, the <div> element is used as a container to load JW Player into, which must have a unique id attribute. The setup() block then refers to this ID. However, let's break down each of the configuration options to see what is being affected:

  • file - Which video we'll be loading with JW Player
  • width - The width of the video player in pixels
  • height - The height of the player, also in pixels. Setting this to 40 or lower will put the player into Audio Mode.

The above configuration options are very basic, but there are many more available to customize JW Player to your liking.

Next Steps

Now that you have configured a basic player embed, you can start looking into adding further customizations. See the Customization section for more information.

If you are still having problems getting things to work, see our troubleshooting guide for a walkthrough of common embedding issues.

Please sign in to leave your feedback for this article.

Still don't have JW Player? Get It Here