Link raphael-min.js, player-ui.js and the stylesheet at your html header.
In your html body, prepare a div tag for the player, and another for the playlist (optional).
To show the audio player, execute the following (you can see a full example in js/website.js):
player1 = new CAP_Player({
//container can either be a string of the ID of the element, or the DOM element itself
container: "playerSpot1",
size: 280,
playlist: "tomtom"
});
player1.addTracks([
{
filename: "mp3/critical dad.mp3",
artist: "Critical Dad",
picture: "pics/house.png",
title: "Critical Dad"
}
]);
//your player will not show up until you execure .beready(). Afterwhich you can no longer add new tracks.
player1.beReady();
Notice that these commands can be chained together.
You can see a live demo at http://memescloud.com/mediaplayer
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent