Add a custom audio player

5 MINS
5 minutes to complete this task.
Let's talk about audio for a moment. 5 minutes to complete this task.

Get the custom audio player widget here:

Click on the link below to get the audio player widget.

DOWNLOAD March 2015 Downloads Pack

When would you need a stand-alone audio player? Exerts from and audiobook, samples or tracks from a musician or how about audio articles? There are many times a designer may need an audio player, so in this article we will show you how to create a custom audio player for you site.

We are going to start with one of our widgets, the CAP (Custom Audio Player), part of this months downloads.

Before we start, ensure that you have the audio files you will need. If you need to encode your audio take a look at Dan's article on audio encoding.


Step One:

Drag the CAP widget onto your page canvas. The widget renders an approximate preview of the widget so we will go back and forth with the preview window in Muse when we want to see the exact finished product.


Step 1

First decide which audio files you wan to include. MP3 is widely supported but you may wish to include an OGG file also.

Lets load up the audio files, we have some example files in our "Audio Resources" folder in the downloads package.

Preview the widget.


Step 1

Step Two:

I want to make the widget look like a semi-transparent dark glass so lets set the widget to the following settings.


Step 1

Step Three:

Add a rectangle to the page with the following settings.

Gradient fill of Black to Black and opacities of 24% and 76% respectively. Use the effects tools to create a black inner glow with an opacity 92 and a blur of 8. Set the corner radius to 10.

Set the page background fill to #0074BD and it should look something like this:


Step 1

Now bring the audio player to the front, place it on top of the rectangle and you are ready to go.

It's really that easy to build a custom audio player in Muse.

Article Author: Chris Kellett

Chris is one of the worlds leading experts in Adobe Muse and skilled in all aspects of HTML, CSS and Javascript a graphic designer, animator and film producer.

A freelance web developer for 19 years with 150+ muse templates and over 100 muse widgets (and counting) for other Muse template providers under his belt.

Skills Highlight:

Adobe Muse

Coding & Development

Graphic Design & UI

Looking for Adobe Muse Widgets? Looking to for Adobe Muse Training?
Copyright © 123muse.com 2015 - All rights reserved