Skip to content

Commit

Permalink
Playback speed improvements
Browse files Browse the repository at this point in the history
  • Loading branch information
@Willena
Willena committed Oct 2, 2016
1 parent 5864d05 commit 21e447e
Show file tree
Hide file tree
Showing 4 changed files with 47 additions and 50 deletions.
2 changes: 1 addition & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -263,7 +263,7 @@ An example of using the event emitter to control the playlist can be found in [/
| `mastervolumechange` | `volume` | Set a new master volume `volume` (0-100) |
| `select` | `start, end, track:optional` | Seek to the start time or start/end selection optionally with active track `track`. |
| `startaudiorendering` | (`wav | buffer`) | Request for a downloadable file or web Audio buffer that represent the current work |
| `speedchange` | `speed` | Change de playback speed.|
| `speedchange` | `speed` | Change de playback speed. Minimum is 0.5x and maximum is 4x |

#### Events to Listen to

Expand Down
93 changes: 46 additions & 47 deletions src/Playlist.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ export default class {

this.fadeType = "logarithmic";
this.masterGain = 1;
this.speed = 1;
}

initRecorder(stream) {
Expand Down Expand Up @@ -129,7 +130,7 @@ export default class {
let ee = this.ee;

ee.on('speedchange', (speed) => {
this.setSpeed(speed);
this.setSpeed(speed);
});

ee.on('select', (start, end, track) => {
Expand All @@ -147,7 +148,7 @@ export default class {
});

ee.on('startaudiorendering', (type) => {
this.startOfflineRender(type);
this.startOfflineRender(type);
});

ee.on('statechange', (state) => {
Expand Down Expand Up @@ -198,11 +199,11 @@ export default class {
});

ee.on('volumechange', (volume, track) => {
track.setGainLevel(volume/100);
track.setGainLevel(volume / 100);
});

ee.on('mastervolumechange', (volume) => {
this.masterGain = volume/100
this.masterGain = volume / 100
this.tracks.forEach((track) => {
track.setMasterGainLevel(this.masterGain);
});
Expand Down Expand Up @@ -241,7 +242,7 @@ export default class {
});

ee.on('zoomin', () => {
let zoomIndex = Math.max(0, this.zoomIndex-1);
let zoomIndex = Math.max(0, this.zoomIndex - 1);
let zoom = this.zoomLevels[zoomIndex];

if (zoom !== this.samplesPerPixel) {
Expand All @@ -251,7 +252,7 @@ export default class {
});

ee.on('zoomout', () => {
let zoomIndex = Math.min(this.zoomLevels.length-1, this.zoomIndex+1);
let zoomIndex = Math.min(this.zoomLevels.length - 1, this.zoomIndex + 1);
let zoom = this.zoomLevels[zoomIndex];

if (zoom !== this.samplesPerPixel) {
Expand All @@ -265,7 +266,7 @@ export default class {
});
}

load(trackList, options={}) {
load(trackList, options = {}) {
let loadPromises = trackList.map((trackInfo) => {
let loader = LoaderFactory.createLoader(trackInfo.src, this.ac, this.ee);
return loader.load();
Expand Down Expand Up @@ -344,8 +345,8 @@ export default class {
}

/*
track instance of Track.
*/
track instance of Track.
*/
setActiveTrack(track) {
this.activeTrack = track;
}
Expand All @@ -359,9 +360,9 @@ export default class {
}

/*
start, end in seconds.
*/
setTimeSelection(start=0, end=undefined) {
start, end in seconds.
*/
setTimeSelection(start = 0, end = undefined) {
this.timeSelection = {
start,
end: (end === undefined) ? start : end
Expand All @@ -370,13 +371,13 @@ export default class {
this.cursor = start;
}

startOfflineRender(type){
startOfflineRender(type) {
if (this.isRendering) {
return;
}

this.isRendering = true;
this.offlineAudioContext = new (window.OfflineAudioContext || window.webkitOfflineAudioContext)(2, 44100*this.duration, 44100);
this.offlineAudioContext = new (window.OfflineAudioContext || window.webkitOfflineAudioContext)(2, 44100 * this.duration, 44100);

var currentTime = this.offlineAudioContext.currentTime,
startTime = 0,
Expand All @@ -386,14 +387,14 @@ export default class {
track.setOfflinePlayout(new Playout(this.offlineAudioContext, track.buffer));
track.schedulePlay(currentTime, startTime, endTime, {
shouldPlay: this.shouldTrackPlay(track),
masterGain : 0.8,
isOffline : true
masterGain: 0.8,
isOffline: true
});
});

/*
TODO cleanup of different audio playouts handling.
*/
TODO cleanup of different audio playouts handling.
*/
this.offlineAudioContext.startRendering().then((audioBuffer) => {
if (type == 'buffer') {
this.ee.emit('audiorenderingfinished', type, audioBuffer);
Expand Down Expand Up @@ -477,12 +478,8 @@ export default class {
});
}

setSpeed(speed){
this.speed = (speed>=0.5 && speed <= 2)? speed : 1;
this.tracks.forEach((track) => {
track.setSpeed(this.speed);
});

setSpeed(speed) {
this.speed = (speed >= 0.5 && speed <= 4) ? speed : 1;
if (this.isPlaying())
this.restartPlayFrom(this.playbackSeconds);
this.ee.emit('speedchanged', this.speed);
Expand Down Expand Up @@ -551,8 +548,8 @@ export default class {
}

/*
* returns the current point of time in the playlist in seconds.
*/
* returns the current point of time in the playlist in seconds.
*/
getCurrentTime() {
let cursorPos = this.lastSeeked || this.pausedAt || this.cursor;

Expand All @@ -563,7 +560,7 @@ export default class {
return this.ac.currentTime - this.lastPlay;
}

setMasterGain(gain){
setMasterGain(gain) {
this.ee.emit('mastervolumechange', gain);
}

Expand Down Expand Up @@ -594,10 +591,11 @@ export default class {
}

this.tracks.forEach((track) => {
track.setSpeed(this.speed);
track.setState('cursor');
playoutPromises.push(track.schedulePlay(currentTime, startTime, endTime, {
shouldPlay: this.shouldTrackPlay(track),
masterGain : this.masterGain
masterGain: this.masterGain
}));
});

Expand Down Expand Up @@ -694,15 +692,15 @@ export default class {
this.setActiveTrack(track || this.tracks[0]);
this.pausedAt = start;
this.setTimeSelection(start, end);
if (this.getSeekStyle() == 'fill'){
if (this.getSeekStyle() == 'fill') {
this.playbackSeconds = start;
}
}
}

/*
* Animation function for the playlist.
*/
* Animation function for the playlist.
*/
updateEditor(cursorPos) {
let currentTime = this.ac.currentTime;
let playbackSeconds = 0;
Expand All @@ -715,15 +713,15 @@ export default class {

if (this.isPlaying()) {
//console.log("speed " + this.speed);
playbackSeconds = cursorPos + elapsed*this.speed;
playbackSeconds = cursorPos + elapsed * this.speed;
this.ee.emit('timeupdate', playbackSeconds);
this.animationRequest = window.requestAnimationFrame(
this.updateEditor.bind(this, playbackSeconds)
);
}
else {
if ((cursorPos + elapsed) >=
(this.isSegmentSelection()) ? selection.end : this.duration) {
(this.isSegmentSelection()) ? selection.end : this.duration) {
this.ee.emit('finished');
}

Expand All @@ -747,14 +745,14 @@ export default class {

//use for fast forwarding.
this.viewDuration = pixelsToSeconds(
this.rootNode.clientWidth - this.controls.width,
this.samplesPerPixel,
this.sampleRate
this.rootNode.clientWidth - this.controls.width,
this.samplesPerPixel,
this.sampleRate
);
});
}

getTrackRenderData(data={}) {
getTrackRenderData(data = {}) {
let defaults = {
"height": this.waveHeight,
"resolution": this.samplesPerPixel,
Expand All @@ -771,15 +769,15 @@ export default class {
}

isActiveTrack(track) {
let activeTrack = this.getActiveTrack();
return this.isSegmentSelection() ?
((activeTrack === track) ? true : false) : true;
let activeTrack = this.getActiveTrack();
return this.isSegmentSelection() ?
((activeTrack === track) ? true : false) : true;
}

render() {
let controlWidth = this.controls.show ? this.controls.width : 0;
let timeScale = new TimeScale(this.duration, this.scrollLeft,
this.samplesPerPixel, this.sampleRate, controlWidth);
this.samplesPerPixel, this.sampleRate, controlWidth);

let trackElements = this.tracks.map((track) => {
return track.render(this.getTrackRenderData({
Expand All @@ -796,9 +794,9 @@ export default class {
},
"onscroll": (e) => {
this.scrollLeft = pixelsToSeconds(
e.target.scrollLeft,
this.samplesPerPixel,
this.sampleRate
e.target.scrollLeft,
this.samplesPerPixel,
this.sampleRate
);
this.ee.emit("scroll", this.scrollLeft);
},
Expand All @@ -814,9 +812,10 @@ export default class {
containerChildren.push(trackSection);

return h("div.playlist", {
"attributes": {
"style": "overflow: hidden; position: relative;"
}},
"attributes": {
"style": "overflow: hidden; position: relative;"
}
},
containerChildren
);
}
Expand Down
1 change: 0 additions & 1 deletion src/Track.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -208,7 +208,6 @@ export default class {

setSpeed(speed){
this.speed = speed;
this.playout.setSpeed(speed);
}

/*
Expand Down
1 change: 0 additions & 1 deletion src/app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,6 @@ export function init(options={}, ee=EventEmitter()) {
playlist.setMono(config.mono);
playlist.setShowTimeScale(config.timescale);
playlist.setSeekStyle(config.seekStyle);
playlist.setSpeed(1);

//take care of initial virtual dom rendering.
let tree = playlist.render();
Expand Down

0 comments on commit 21e447e

Please sign in to comment.