Star Sign: Playlist

Playlist visualized on canvas.

이용 기술 자바스크립트, HTML5, 캔버스, CSS3, 오디오,

  • 조회수 285회
  • 댓글수 1건

현재 데모에 대한 개발자 댓글

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”, available at Jamendo.com [1] under CC BY-NC 2.0.

The web font used in the demo is "Dosis" and is provided by Google Web Fonts [2].

Tested in Firefox 11, Opera 11.62 and Chrome 18.


[1] http://www.jamendo.com/en/list/a4219/life-s-path
[2] http://www.google.com/webfonts/specimen/Dosis

1 건의 댓글 있음

새로운 데모를 추가하려면 로그인하십시오.

  1. davo.sk에 의한 댓글

    Grat demo :) I think this was one of the best in the dev derby.

About this Demo

소스 다운로드 10688.26 KB · ZIP 파일

현재 데모는 GPL 라이센스 하에 공개되고 있습니다.

더 많은 정보 보기 meinstuhlknarrt