Written and tested by Darian Kanius

One of the most common questions we receive at MuseThemes.com is how to embed audio playlists into a Muse website. Right now there are very few ways to accomplish this without hosting files on your own web server, and working directly with a code based solution. There are embeddable flash based audio players on the market, but using these widgets limits your users to desktop devices only, as mobile / tablet devices do not support flash.

Enter Snacktools, an interesting company that specializes in creating HTML5 widgets and audio players. HTML5 based widgets work perfectly on mobile devices - exciting right?

www.snacktools.com

Preview a live version of the music player we created here.

GETTING SETUP

Getting set up with Podsnack is as easy as creating a free account and accessing their library of professional looking audio players. They have everything from full featured playlist styles, Apple inspired Carousels, all the way down to simple play-mute-pause buttons.

Once you get your account set up you will want to click the 'New Playlist' button located in the upper right of the header.

CREATING AN AUDIO PLAYER

The process for creating an audio player is a simple 3 step process.

1. Adding tracks. You’re given several options for adding your own tracks to a playlist, including your own computer, Dropbox, and Youtube. They even allow you to record your own content live on the site.

2. Customize and style your audio player. Podsnack provides a wide selection of styles to choose from and several options to customize your player.

3. Publish. Once you are done adding tracks and picking your player, you can now publish it to your website. Publishing options are included below.

PUBLISHING TO YOUR WEBSITE

Once you have finished adding tracks and customizing the player, you can now publish it to the “My Podsnack” section. Here they give you a bunch of options for sharing, downloading, or embedding your player.

For this quick guide we will choose the embed option. Clicking the embed button will open a pop up window that gives you the option of purchasing the player using credits (their version of paid currency useable throughout all of their Snacktool apps) or a free option that is watermarked. I am going to choose the free version for demo purposes.

When I click the free version option I am presented with an embed code. I will copy this code and place it into my Muse website using the Object > Insert HTML command.

Once you have embedded the code in Muse, you will need to preview it in a browser to see it in action.

That is all there is to it! I hope this quick guide was music to your ears. We also created a mobile and tablet version so you can preview the music player on all of your devices.

Create awesome things.
-Darian Kanius.