This repository has been archived by the owner. It is now read-only.
Permalink
Fetching contributors…
Cannot retrieve contributors at this time
114 lines (96 sloc) 3.94 KB
<!DOCTYPE html>
<html>
<head>
<title>Popcorn Soundcloud Player Example</title>
<style>
#media_1{
width: 80%;
height: 160px;
}
</style>
<script src="../../popcorn.js"></script>
<script src="../../modules/player/popcorn.player.js"></script>
<script src="../../wrappers/common/popcorn._MediaElementProto.js"></script>
<script src="../../wrappers/soundcloud/popcorn.HTMLSoundCloudAudioElement.js"></script>
<script type="text/javascript" src="popcorn.soundcloud.js"></script>
<!-- Plugins for demo purposes -->
<script src="../../plugins/footnote/popcorn.footnote.js"></script>
<script type="text/javascript">
document.addEventListener( "DOMContentLoaded", function() {
var popcorn,
muted = true;
document.getElementById( "btnPlay" ).addEventListener( "click", function() {
popcorn.play();
}, false);
document.getElementById( "btnPause" ).addEventListener( "click", function() {
popcorn.pause();
}, false);
document.getElementById( "btnSeek" ).addEventListener( "click", function() {
popcorn.currentTime( 30 );
}, false);
document.getElementById( "btnVolume" ).addEventListener( "click", function() {
if ( popcorn.volume() >= 0.5 ) {
popcorn.volume( popcorn.volume() / 2 );
this.innerHTML = "Double Volume";
} else {
popcorn.volume( popcorn.volume() * 2 );
this.innerHTML = "Halve Volume";
}
}, false);
document.getElementById( "btnMute" ).addEventListener( "click", function() {
popcorn.mute( muted );
muted = !muted;
this.innerHTML = !muted ? "Unmute" : "Mute";
}, false);
popcorn = Popcorn.soundcloud( "media_1", "http://soundcloud.com/rhymesayers/brother-ali-us" );
popcorn.on( "load", function() {
document.getElementById( "media_duration" ).innerHTML = popcorn.duration();
document.getElementById( "media_volume" ).innerHTML = popcorn.volume();
document.getElementById( "media_currentTime" ).innerHTML = popcorn.currentTime();
document.getElementById( "media_readyState" ).innerHTML = popcorn.media.readyState;
popcorn.on( "timeupdate", function() {
document.getElementById( "media_currentTime" ).innerHTML = popcorn.currentTime();
});
popcorn.media.addEventListener( "readystatechange", function() {
document.getElementById( "media_readyState" ).innerHTML = popcorn.video.readyState;
});
popcorn.on( "volumechange", function() {
document.getElementById( "media_volume" ).innerHTML = popcorn.volume();
});
popcorn.trigger( "play" );
});
// Empty for the purposes of allowing popcorn.trigger("play");
popcorn.on( "play", function() {
});
popcorn.footnote({
start: 5,
end: 40,
text: "The song is 'Flickermood', by Forss",
target: "footnotediv"
});
}, false);
</script>
</head>
<body>
<div id="media_1" ></div><br />
<div>
<button class="simple" id="btnPlay">Play</button>
<button class="simple" id="btnPause">Pause</button>
<button class="seek" id="btnSeek">Seek to 30</button>
<button class="volume" id="btnVolume">Toggle Volume</button>
<button class="volume" id="btnMute">Mute</button><br />
<div style="float: left;">
Current Time (s): <span id="media_currentTime"></span>
<br />Duration (s): <span id="media_duration"></span>
<br />Volume (0-1): <span id="media_volume"></span>
<br />Ready State: <span id="media_readyState">0</span>
</div>
</div>
<div style="float:right; width: 100%;">
<br />
<div id="footnotediv" width="50%" height="50%">
<strong>Footnote Area</strong><br />
</div>
</div>
</body>
</html>