How to build a custom audio player for your own website

Tip: this article is for advanced users. If you're looking for an easier way to embed your Mixlr broadcast into your website or blog try our embeddable player first.

In this article we're going to show you how to build a custom Mixlr player which you can use on your own website or blog.

The player will not feature any Mixlr branding and to create it you'll be using your live stream URL, a feature which is available for Mixlr Pro subscribers. (See more information about Mixlr Pro, and sign up for Mixlr Pro here.)

In this article we'll also be using the popular free JW Player software.

Accessing the JW Player code

First off you'll need to sign up for a JW Player account.

There are several different types of JW Player accounts, some of them paid, but you'll only need the free account for this.

You will be sent a confirmation email. Click on the activation link in the email and you'll be able to add a few more details to create your account.

Once that's done you will see the main set up page for your player.

To generate the code required to use for your custom audio player scroll down the page and tick the box that says 'Include compatibility script'.

Scroll up the page and click 'Save'. Now scroll back down and you'll see your unique Cloud Player Library URL has been generated. Highlight and copy this URL - you'll need it shortly.

Adding your player to your website

Now that you've got the JW Player embed code we're going to show you how to build a simple web page which uses this code to play your Mixlr live stream URL.

To begin, here is the HTML code to build a very simple web page.

<!DOCTYPE>
<html>
  <head>
    <title>My web page</title>
  </head>
  <body>
    <h1>My Mixlr player!</h1>
  </body>
</html>

Save this as index.html and open the file in your browser. You should see something like this:

Next you can add the JW Player Cloud Player Library URL to your page. Add a <script> tag to the head section of your page like this:

<!DOCTYPE>
<html>
  <head>
    <title>My web page</title>
    <script src="//content.jwplatform.com/libraries/YOUR_PERSONAL_JWPLAYER_CODE_HERE.js"></script>
  </head>
  <body>
    <h1>My Mixlr player!</h1>
  </body>
</html>

(Don't forget to replace the URL with your own personal JW Player Cloud Player Library URL.)

Now add the code to create the player on your page. You'll need your Mixlr live stream URL which you can get from your live stream URL settings page. (To use your live stream URL you may need to enable it in that settings page first.)

<!DOCTYPE>
<html>
  <head>
    <title>My web page</title>
    <script src="//content.jwplatform.com/libraries/YOUR_PERSONAL_JWPLAYER_CODE_HERE.js"></script>
  </head>
  <body>
    <h1>My Mixlr player!</h1>

    <div id="player"></div>
    <script type="text/javascript">
      var playerInstance = jwplayer("player");
      playerInstance.setup({
        primary: 'html5',
        playlist: [{
          sources: [{
            file: "http://edge.mixlr.com/channel/YOUR_MIXLR_CHANNEL_TAG_GOES_HERE",
            type: 'mp3'
          }]
        }],
        width: 480,
        height: 40
      });
    </script>

  </body>
</html>

(Don't forget to replace the live stream URL with your own person Mixlr live stream URL code.)

That's it! Now start a Mixlr broadcast. After you've started broadcasting reload your webpage and you should see something like this:

Click the play button and you should hear your live Mixlr broadcast on your webpage!

Troubleshooting

If you can't see your player on the page double-check your HTML code with the code above. Make sure all the <script> and <div> tags are present and your JW Player Cloud Player Library URL is correct.
If you can see the player but can't hear audio make sure you're currently broadcasting live on Mixlr. If you are, check that your live stream URL is correct.

More resources

Of course, you'll want to customise your webpage and player to better suit your website, blog or brand.

You can find basic HTML and CSS tutorials, suitable for complete beginners, on Codecademy.

You can also find comprehensive documentation for JW Player which will allow you to fully customise the style and behaviour of your player.

We hope you've found this tutorial useful! If you have any questions please feel free to contact us.