naomiaro / waveform-playlist

Multitrack Web Audio editor and player with canvas waveform preview. Set cues, fades and shift multiple tracks in time. Record audio tracks or provide audio annotations. Export your mix to AudioBuffer or WAV! Add effects from Tone.js. Project inspired by Audacity.
https://naomiaro.github.io/waveform-playlist/
MIT License
1.48k stars 287 forks source link

Alter playback speed? #19

Open andymcarter opened 8 years ago

andymcarter commented 8 years ago

After a few teething problems due to my lack of experience, now enjoying building some multitracks with this! I teach a Brazilian style of music called choro and you can see the tracks I've built up below.

http://chorotest.hol.es/

Is there a way to implement the webaudio playback speed feature, using a global slider like the master volume control. Then my students could speed up or slow down the track slightly (within reason).

https://developer.mozilla.org/en-US/Apps/Fundamentals/Audio_and_video_delivery/WebAudio_playbackRate_explained

naomiaro commented 8 years ago

Hey! I'm checking out these site that you posted, but I'm getting some net::ERR_CONTENT_LENGTH_MISMATCH errors so I can't see the tracks loading.

I could try implementing a playback speed feature. There is nothing altering that parameter in the code so far. It will take just a bit of work I think to sync the changed playback rate with the UI, but it should be doable.

naomiaro commented 8 years ago

Maybe this was just my network in my coworking space, but it's working fine now from my home these examples.

Willena commented 8 years ago

I could try implementing a playback speed feature. There is nothing altering that parameter in the code so far. It will take just a bit of work I think to sync the changed playback rate with the UI, but it should be doable.

increase or slow down the speed is doable. In the current code as we did ( almost ) to create the master gain, we can modify the source playbackRate parameter . But as shown in this example, the audio is modified. And it might be very dificult to counter this modification.

andymcarter commented 8 years ago

http://hyperaud.io/lab/pbr-test/

The audio implementation at the bottom of the page doesn't change audio pitch.

PS. grateful for the responses :)

Willena commented 8 years ago

Having a look at https://developer.mozilla.org/en-US/Apps/Fundamentals/Audio_and_video_delivery/WebAudio_playbackRate_explained confirm what I was saying before. In Web Audio when you change the playback rate, the pitch also change and there are no automatic corrections. In your example when you are playing audio you are using html audio elements, which correct automaticaly the pitch. This project is build over web audio APIs, so we have to write our own pitch correction functions.

andymcarter commented 8 years ago

Hadn't appreciated the difference between the two APIs, thanks for explaining.

naomiaro commented 3 years ago

Looking into projects that do this with webaudio...

Check AudioWorklet support

PDL-II commented 3 years ago

It seems to be very in demand this feature. Sometimes small tweaks like speeding up or down a file and it makes the whole difference. I really hope this feature gets added to this already amazing software! :)

p-himik commented 2 years ago

Currently, the page linked above, https://developer.mozilla.org/en-US/Apps/Fundamentals/Audio_and_video_delivery/WebAudio_playbackRate_explained, states:

The pitch of the audio track does not change when playBackRate is altered.

And I can confirm this in at least Chrome and Firefox on Ubuntu.

Update: huh, but it doesn't work with AudioBufferSourceNode.playbackRate - the pitch is changed.