https://github.com/sebadorn/mozilla-dev-derby--audio

Demo for the Mozilla Dev Derby in April 2012 to the topic of <audio>.
https://github.com/sebadorn/mozilla-dev-derby--audio

Last synced: 2 days ago
JSON representation

Demo for the Mozilla Dev Derby in April 2012 to the topic of <audio>.

• Host: GitHub
• URL: https://github.com/sebadorn/mozilla-dev-derby--audio
• Owner: sebadorn
• Created: 2012-05-05T21:36:29.000Z (over 12 years ago)
• Default Branch: master
• Last Pushed: 2013-08-27T17:53:51.000Z (about 11 years ago)
• Last Synced: 2023-03-23T03:07:31.694Z (over 1 year ago)
• Language: JavaScript
• Size: 105 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Mozilla Dev Derby: Audio

My entry for the [Mozilla Dev Derby](https://developer.mozilla.org/en-US/demos/devderby) in April 2012. The topic was *audio*.  

[Here is the submission.](https://developer.mozilla.org/en-US/demos/detail/star-sign-playlist)  

---

Visualizes the tracks of a playlist as connected points. Starting at the first, it will progress to play all songs in order. Starting or pausing a song is done by clicking its corresponding point. The connection between songs works as progress bar and can be used for seeking by simply clicking on it. They also correspond to the length of their song: long song = long connection.

Visualization is done with a canvas element, playback with audio. Some other elements like info bubbles or the volume control are container elements styled with CSS.

The chosen tracks are from the album [“Life's Path” by “Mindthings”](http://www.jamendo.com/en/list/a4219/life-s-path), available at Jamendo.com under CC BY-NC 2.0.

The web font used in the demo is [Dosis](https://www.google.com/webfonts/specimen/Dosis).

Tested in Firefox 11, Opera 11.62 and Chrome 18.