niumusicplayer

Iframe music player that uses youtube playlists.

demo

How to put this on your site

1. Upload the .js file to your site

2. The HTML tags

The minimal version:

<div id="player" playlist="PLfgjZUmExyGsnvWRVVCyoNJzW6Bm81zMg"></div>
<button onclick="pauseplay()">play/pause</button>
<div id="nowplaying"></div>
<script src="/niumusicplayer.js"></script>

Breakdown of what everything is:

• The player div will be replaced with an iframe that plays the music. Put your playlist's id in the playlist attribute. The id is the part that goes after ?list= in the URL of a youtube playlist. If you want your playlist to be shuffled, put in a shuffle="yes" attribute, if you want the player to autoplay, add in autoplay="yes".
• The button controls pausing/playing. You can use any HTML tag, as long as it has the onclick="pauseplay()" attribute.
• The second div displays the title of the currently playing video. You can also use any HTML tag for this, as long as its id is nowplaying. You could make a scrolling title with a marquee, for example
• Script tag linking to the .js file

The full version:

<div id="niuplayer">
        <div id="player" playlist="PLfgjZUmExyGsnvWRVVCyoNJzW6Bm81zMg" shuffle="yes"></div>
        <button onclick="pauseplay()">play/pause</button>
        <button onclick="player.previousVideo()">prev</button>
        <button onclick="player.nextVideo()">next</button>
        <div id="nowplaying"></div>
        <div id="nextup"></div>
        <script src="niumusicplayer.js">
        </script>
</div>

Let's go over the extras:

• A div wrapper, for easier styling
• Previous/next buttons. Again, can be any element as long as it has the same onclick
• The nextup div shows the next track in the playlist. Similar deal to the nowplaying one.

3. Styling

Style the player to your liking. Here's something basic:

#niuplayer {
    border: solid 5px black;
    padding: 1em;
    border-radius:20px;
    background-color: #c2c2c2;
}
#niuplayer button {
    background-color: #fff;
    border: solid 5px black;
    padding: 0.5em;
    border-radius:20px;
}

And that's it. If you like, you can link back to this repo, so that others can find it too, but it's not required.