Description
This demo will showcase how a player for Popcorn.js may be powered by Soundcloud's Flash audio player. This is done by making the flash audio player masquerade as HTML 5 media element.
Due to the Flash security model, this demo must be run from a web server
Custom controls have been developed and tied into their player for demo purposes.
Clicking play/pause or seeking in either the Soundcloud player or via custom controls will cause the other to update.
The Soundcloud audio can be specified in the HTML source by giving the Soundcloud song url to either the Popcorn.soundcloud constructor or as the div data-src attribute.
Specifying the source in the constructor will override any source specified on the container element.
Player width/height can be specified as container attributes (data-width, data-height), or as styles (width, height). Styles can be inline or CSS.
If no width or height are given, they default to '100%' and '81px' respectively.
Width/height precendence is in this order: constructor, container attributes, natural (manually given inline/CSS styles), default
Expected Events
- Throughout the track, user comments from Soundcloud will appear below 'Comment Area'.
- From 0 to 15 seconds, the site 'http://webmademovies.org/' will appear below 'Web Page Area'.
- From 0 to 20 seconds, blogs from 'http://zenit.senecac.on.ca/~chris.tyler/planet/rss20.xml' will appear below 'Google Feed Area'.
- From 5 to 15 seconds, the subtitle 'This is overlaid on top of the audio visualization. You can hightlight it!' will be overlaid on the Soundcloud player.
- From 5 to 15 seconds, the Mozilla Drumbeat logo will appear below 'Image Area'.
- From 5 to 40 seconds, the footnote 'The song is "Flickermood", by Forss' will appear below 'Footnote Area'.
- From 5 to 60 seconds, the 'Flickermood, Eric Wahlforss' will appear below 'Attributions Area'.
- From 20 to 40 seconds, the a flickr stream of 8 images tagged 'georgia' will appear below 'Flickr Area'.
- From 20 to 45 seconds, tweets tagged #oilspill will appear below 'Twitter Area'.
Attributions Area
Flickr Area
Image Area
Google Feed Area
Web Page Area