This article is for advanced users. If you're looking for an easy way to embed Mixlr into your website or blog, try our embeddable player
In this article, we're going to build a custom Mixlr player suitable for your own website or blog.
The player will not feature any Mixlr branding, and will make use of your live stream URL, which is available for Mixlr Pro subscribers. (See more information about Mixlr Pro
, or sign up for Mixlr Pro
We're going to use the popular, free JWPlayer
software to build your player.
Part 1: JW Player set up
We're going to start by signing up for a JWPlayer account
There are various JWPlayer account types, some of them paid, but we only need the free account.
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.
Part 2: Your website
Now we have the JWPlayer embed code, we're going to build a simple web page which uses this to play your Mixlr live stream URL.
We're going to start with a very simple web page. Here's the HTML code:
Save this as index.html
and open the file in your browser. You should see something like this:
Next, let's add the JWPlayer URL, which we made a note of in Part 1, to our page. Add a <script> tag to the head section of your page, something like this:
(Don't forget to replace the URL with your own personal JWPlayer URL).
Next, we're going to 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
. To use your live stream URL you need to enable it in your settings first.
(Don't forget to replace the live stream URL with your personal Mixlr live stream URL).
That's it! Now, start a Mixlr broadcast. After you've started broadcasting, reload your web page and you should see something like this.
Click the play button, and you should hear your live Mixlr broadcast on your own web page!
Part 3: 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 JWPlayer 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.
Part 4: More resources
Of course, you'll want to customise your web page and player more 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 JWPlayer
, which will allow you to fully customise the style and behaviour of your player.
We hope you've found this tutorial useful. If you've got more questions, feel free to get in touch and we'll try to help.