https://github.com/amine7536/cinnamon

A nice lightweight nifty HTML5 & Javascript audio player that helps you pimp your web sites in a reasonable manner.
https://github.com/amine7536/cinnamon

Last synced: 11 days ago
JSON representation

A nice lightweight nifty HTML5 & Javascript audio player that helps you pimp your web sites in a reasonable manner.

• Host: GitHub
• URL: https://github.com/amine7536/cinnamon
• Owner: amine7536
• Created: 2015-10-01T11:03:02.000Z (about 9 years ago)
• Default Branch: master
• Last Pushed: 2015-10-01T12:27:10.000Z (about 9 years ago)
• Last Synced: 2024-04-16T04:18:55.984Z (7 months ago)
• Language: JavaScript
• Size: 18.7 MB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Cinnamon

A nice lightweight nifty HTML5 & Javascript audio player that helps you pimp your web sites in a reasonable manner.

## Usage

Cinnamon audio player relies on the html  tag to create a player with its features. It is easy yo setup in 3 steps: all you have to do is to copy the files in your project directory and setup the proper tags. First include the fonts in your html head then import Cinnamon's CSS file. Then create an audio tag with as many sources as you want. Don't forget to fill Cinnamon's custom attributes (see additional settings). Finally call up Cinnamon's scripts before closing your body tag. Nothing more, your player is fixed down the page.

```html

  

    

    ...

    

    

    

    

    

    ...

  

  

  ...

    

    

      

      

      

      

      

      Your browser does not support the audio element.

    

    

    ...

    

    

    

  ...

  

```

##Additional settings

Cinnamon uses custom attributes to display each song's features. You can easily customize your player through them:

* file-thumb: the url of the album's thumbnail

* file-name: the title displayed on the player

* file-author: the author of the track

Don't let them blank. They will be used to pimp the interface on each song's change.

```html

  

  ...

```

##CSS rules

In order to function properly, Cinnamon's needs some CSS directives to be set on. Whatever is your setup for your project make sure you have the following going on.

```css

* {

  box-sizing: border-box;

}

html, body {

  width: 100%;

  margin: 0;

  padding: 0;

}

```

Tested on Chromium Browser Version 44.0.2 & Mozilla Firefox Version 40.0.3 (checkout [Midori](https://github.com/adilbenseddik/cinnamon/tree/midori)'s branch for Safari fixes)