To do this, right inside of the id=“single-song-player” element, add the following: We will be adding our album art image to the player. This is our first encounter with an AmplitudeJS specific element. Inside of this element will contain a few AmplitudeJS specific elements. This is not an AmplitudeJS element it’s simply a container for the player that we are building. Next, I add a player container which is simply a element that we will be structuring to make our player. You can include any other styles or fonts if needed. I also included a Google Font which makes the player look good. | Foundation like I mentioned, this is only for layout and helps design the player. To start off, set up your index.html file like this: Ī few things to notice here, we included foundation: The most advanced responsive front-end framework in the world. I use foundation for just page layout and jQuery for any animation functions. AmplitudeJS is not dependent on any 3rd party library so these are not required for any player.

We will be walking through the mindset of using AmplitudeJS for building a single song player.Īs for JS, if you are following along with the example player, I have foundation and jQuery included. In the example player we DO use SASS, but that’s outside the scope of this tutorial.

If you are doing SASS compiling or any other JS compiling, you might want to add a /resources directory and add all of your components in there. With any web development, I like to lay out my folder structure right away so as I build I have places for all of my assets.įor this player, I’d open your working directory and make the following files and folders: If you have a design for your player already, you can follow along with the basics, otherwise feel free to grab the files from the example player as that’s what we will be using to step through. You shouldn’t need a web server since there’s no server side code. An organized directory you can open in a web browser.A song you want to play (preferably in an MP3 Format).The newest version of AmplitudeJS here: GitHub – 521dimensions/amplitudejs: Amplitude.js is the HTML5 Audio Player for the modern era.Pre-Requisitesīefore we start building our player, we need to have a few assets in order: All the code is available to download but I’ll be walking through the basics as an introduction on how to use AmplitudeJS and play a single song in your browser. For this tutorial, I will be building the example player here: amplitudejs/examples/single-song at master

So, let’s start with a very simple player, a single song player. Build better software and get user feedback directly in GitHub, GitLab, and more.

Amplitudejs playnow change song