constructor(player: PlayerCore) {
// compatibility goal: minimum IE11
this.player = player;
// buttons box
this._buttonsBox = document.getElementById('js-buttons-box');
// slider (html5 input range)
this._volumeSlider = document.getElementById('js-player-volume') as HTMLInputElement;
// loading progress bar (html5 input range)
this._loadingProgressBar = document.getElementById('js-player-loading-progress') as HTMLInputElement;
// playing progress bar (html5 input range)
this._playingProgressBar = document.getElementById('js-player-playing-progress') as HTMLInputElement;
// start listening to events
this._createListeners();
// set the initial volume volume to the volume input range
this._volumeSlider.value = String(this.player.getVolume());
}
player.getAudioContext().then((audioContext) => {
let bufferInterval = 1024;
let numberOfInputChannels = 1;
let numberOfOutputChannels = 1;
// create the audio graph
visualizerAudioGraph.gainNode = audioContext.createGain();
visualizerAudioGraph.delayNode = audioContext.createDelay(1);
visualizerAudioGraph.scriptProcessorNode = audioContext.createScriptProcessor(bufferInterval, numberOfInputChannels, numberOfOutputChannels);
visualizerAudioGraph.analyserNode = audioContext.createAnalyser();
// analyser options
visualizerAudioGraph.analyserNode.smoothingTimeConstant = 0.2;
visualizerAudioGraph.analyserNode.minDecibels = -100;
visualizerAudioGraph.analyserNode.maxDecibels = -33;
visualizerAudioGraph.analyserNode.fftSize = 16384;
//visualizerAudioGraph.analyserNode.fftSize = 2048;
// connect the nodes
visualizerAudioGraph.delayNode.connect(audioContext.destination);
visualizerAudioGraph.scriptProcessorNode.connect(audioContext.destination);
visualizerAudioGraph.analyserNode.connect(visualizerAudioGraph.scriptProcessorNode);
visualizerAudioGraph.gainNode.connect(visualizerAudioGraph.delayNode);
player.setAudioGraph(visualizerAudioGraph);
});
protected _onChangePlayingProgress(event: Event) {
let rangeElement = event.target as HTMLInputElement;
let value = parseInt(rangeElement.value);
this.player.setPosition(value);
}
protected _onChangeVolume(event: Event) {
// styling the html5 range:
// http://brennaobrien.com/blog/2014/05/style-input-type-range-in-every-browser.html
let rangeElement = event.target as HTMLInputElement;
let value = parseInt(rangeElement.value);
this.player.setVolume(value);
}
$(function () {
let options: ICoreOptions = {
soundsBaseUrl: 'https://mp3l.jamendo.com/?trackid=',
playingProgressIntervalTime: 500
};
let player = new PlayerCore(options);
let playerUI = new PlayerUI(player);
let firstSoundAttributes: ISoundAttributes = {
sources: '1314412&format=mp31',
id: 1314412,
playlistId: 0,
onLoading: (loadingProgress, maximumValue, currentValue) => {
console.log('loading: ', loadingProgress, maximumValue, currentValue);
playerUI.setLoadingProgress(loadingProgress);
},
onPlaying: (playingProgress, maximumValue, currentValue) => {
console.log('playing: ', playingProgress, maximumValue, currentValue);
playerUI.setPlayingProgress(playingProgress);
},
onStarted: (playTimeOffset) => {
console.log('started', playTimeOffset);
},
onPaused: (playTimeOffset) => {
console.log('paused', playTimeOffset);
},
onStopped: (playTimeOffset) => {
console.log('stopped', playTimeOffset);
},
onResumed: (playTimeOffset) => {
console.log('resumed', playTimeOffset);
},
onEnded: (willPlayNext) => {
console.log('ended', willPlayNext);
if (!willPlayNext) {
playerUI.switchPlayerContext('on');
}
}
};
// add the first song to queue
let firstSound = player.addSoundToQueue(firstSoundAttributes);
let secondSoundAttributes: ISoundAttributes = {
sources: '1214935&format=ogg1',
id: 1214935,
playlistId: 0,
onLoading: (loadingProgress, maximumValue, currentValue) => {
console.log('loading: ', loadingProgress, maximumValue, currentValue);
playerUI.setLoadingProgress(loadingProgress);
},
onPlaying: (playingProgress, maximumValue, currentValue) => {
console.log('playing: ', playingProgress, maximumValue, currentValue);
playerUI.setPlayingProgress(playingProgress);
},
onStarted: (playTimeOffset) => {
console.log('started', playTimeOffset);
},
onPaused: (playTimeOffset) => {
console.log('paused', playTimeOffset);
},
onStopped: (playTimeOffset) => {
console.log('stopped', playTimeOffset);
},
onResumed: (playTimeOffset) => {
console.log('resumed', playTimeOffset);
},
onEnded: (willPlayNext) => {
console.log('ended', willPlayNext);
if (!willPlayNext) {
playerUI.switchPlayerContext('on');
}
}
};
// add another song
let secondSound = player.addSoundToQueue(secondSoundAttributes);
//let volume = 90;
//player.setVolume(volume);
// play first song in the queue
//player.play();
// play next song
//player.play(player.PLAY_SOUND_NEXT);
// TODO: use the sound to display the loading progress
// TODO: add two sounds, then play the second one by passing it's id, queue should get rid of first song and immediatly play the second one
// TODO: add a playlist of multiple songs at once, play some song (not the first one), again queue up until that song should get wiped, then play any previous song by id
// but as queue won't know that song, we need to trigger some error
// do this again but this time reset queue and repopulate it, then play the previous song
// TODO: can we add some playlist support to avoid that the user manually needs to manage the queue? especially to avoid having to reset it when playing earlier song and then rebuild himself?
// TODO: autoplay next song, add two songs, play first one, when ended next one should get played
// TODO: can we by using the sound, cache its buffer and then re-inject it before playing so that it does get re-loaded/buffered by player
// TODO: try out playing songs by using play('next / previous / first / last')
// TODO: add methods to move songs in queue? or remove songs from queue
// TODO: add history feature and keep track of songs that have been played
// TODO: can sounds be destroyed? what happens to history if the have been played and get destroyed, what happens if song is in queue or even if song is being played or is buffering when it gets destroyed
// TODO: test the songs buffer cache, set through options amount of buffers to keep in cache and then check if ajax request is done or not when playing song multiple times
// TODO: cache buffer in indexed db or just keep "in memory"?
});
protected _onClickButtonsBox(event: Event) {
event.preventDefault();
let $button = event.target as HTMLElement;
if ($button.localName === 'span') {
$button = $button.parentElement;
}
if ($button.id === 'js-play-pause-button') {
let playerContext = this._buttonsBox.dataset['playerContext'];
switch (playerContext) {
// is playing
case 'on':
this.player.pause();
break;
// is paused
case 'off':
this.player.play();
break;
}
this.switchPlayerContext(playerContext);
}
if ($button.id === 'js-previous-button') {
this.setPlayingProgress(0);
let playerContext = this._buttonsBox.dataset['playerContext'];
if (playerContext === 'off') {
this.switchPlayerContext(playerContext);
}
this.player.play('previous');
}
if ($button.id === 'js-next-button') {
this.setPlayingProgress(0);
let playerContext = this._buttonsBox.dataset['playerContext'];
if (playerContext === 'off') {
this.switchPlayerContext(playerContext);
}
this.player.play('next');
}
if ($button.id === 'js-shuffle-button') {
// TODO
}
if ($button.id === 'js-repeat-button') {
// TODO
}
}
$(function () {
let options: ICoreOptions = {
soundsBaseUrl: 'https://mp3l.jamendo.com/?trackid=',
playingProgressIntervalTime: 500,
//volume: 80
};
let player = new PlayerCore(options);
player.setVolume(80);
let visualizerAudioGraph: any = {};
player.getAudioContext().then((audioContext) => {
let bufferInterval = 1024;
let numberOfInputChannels = 1;
let numberOfOutputChannels = 1;
// create the audio graph
visualizerAudioGraph.gainNode = audioContext.createGain();
visualizerAudioGraph.delayNode = audioContext.createDelay(1);
visualizerAudioGraph.scriptProcessorNode = audioContext.createScriptProcessor(bufferInterval, numberOfInputChannels, numberOfOutputChannels);
visualizerAudioGraph.analyserNode = audioContext.createAnalyser();
// analyser options
visualizerAudioGraph.analyserNode.smoothingTimeConstant = 0.2;
visualizerAudioGraph.analyserNode.minDecibels = -100;
visualizerAudioGraph.analyserNode.maxDecibels = -33;
visualizerAudioGraph.analyserNode.fftSize = 16384;
//visualizerAudioGraph.analyserNode.fftSize = 2048;
// connect the nodes
visualizerAudioGraph.delayNode.connect(audioContext.destination);
visualizerAudioGraph.scriptProcessorNode.connect(audioContext.destination);
visualizerAudioGraph.analyserNode.connect(visualizerAudioGraph.scriptProcessorNode);
visualizerAudioGraph.gainNode.connect(visualizerAudioGraph.delayNode);
player.setAudioGraph(visualizerAudioGraph);
});
let isPlaying = false;
// canvas painting loop
function looper() {
if (!isPlaying) {
return;
}
window.webkitRequestAnimationFrame(looper);
// visualizer
var initialArray = new Uint8Array(visualizerAudioGraph.analyserNode.frequencyBinCount);
visualizerAudioGraph.analyserNode.getByteFrequencyData(initialArray);
console.log(initialArray);
//var binsArray = transformToVisualBins(initialArray);
//console.log(binsArray);
var VisualData = GetVisualBins(initialArray)
var TransformedVisualData = transformToVisualBins(VisualData)
console.log(TransformedVisualData);
ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear the canvas
ctx.fillStyle = 'red'; // Color of the bars
for (var y = 0; y < SpectrumBarCount; y++) {
let bar_x = y * barWidth;
let bar_width = barWidth;
let bar_height = TransformedVisualData[y];
// fillRect( x, y, width, height ) // Explanation of the parameters below
//ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillRect(bar_x, (canvas.height / 2) - bar_height, bar_width, bar_height);
ctx.fillRect(bar_x, canvas.height / 2, bar_width, bar_height);
}
}
// initialize player ui
let playerUI = new PlayerUI(player);
// add songs to player queue
let firstSoundAttributes: ISoundAttributes = {
sources: '1314412&format=mp31',
id: 1314412,
//sources: '1214935&format=ogg1',
//id: 1214935,
playlistId: 0,
onLoading: (loadingProgress, maximumValue, currentValue) => {
console.log('loading: ', loadingProgress, maximumValue, currentValue);
playerUI.setLoadingProgress(loadingProgress);
},
onPlaying: (playingProgress, maximumValue, currentValue) => {
console.log('playing: ', playingProgress, maximumValue, currentValue);
playerUI.setPlayingProgress(playingProgress);
},
onStarted: (playTimeOffset) => {
console.log('started', playTimeOffset);
isPlaying = true;
looper();
},
onPaused: (playTimeOffset) => {
console.log('paused', playTimeOffset);
isPlaying = false;
},
onStopped: (playTimeOffset) => {
console.log('stopped', playTimeOffset);
isPlaying = false;
},
onResumed: (playTimeOffset) => {
console.log('resumed', playTimeOffset);
isPlaying = true;
looper();
},
onEnded: (willPlayNext) => {
console.log('ended', willPlayNext);
if (!willPlayNext) {
playerUI.switchPlayerContext('on');
}
isPlaying = false;
}
};
// add the first song to queue
let firstSound = player.addSoundToQueue(firstSoundAttributes);
});