Embed an AAC or MP3 audio player

Learn how to get the JW Player to embed and instatiate in audio mode.


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

The below JWP 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. Please note that MP3 streaming via HLS manifest (m3u8) is not supported.



Embedding Step-by-Step

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



Step 1: Configure your JWP Library

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



OPTION A: ADD A LIBRARY TO YOUR

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

OPTION B: SELF-HOST

If you want to host your own player library, you can find both your license key and latest JWP 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="//mywebsite.com/jwplayer/jwplayer.js"  ></script> 
<script>jwplayer.key="ABCdeFG123456SeVenABCdeFG123456SeVen==";</script>


Step 2: Add the embed code to your

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


Step 3: Configuration

CONFIGURATION OPTIONDESCRIPTION
fileWhich video we'll be loading with JWP.
widthThe width of the video player in pixels. Set as a percentage for a responsive player.
heightThe height of the player, also in pixels. Setting this to 40 or lower will put the player in Audio mode.

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