0

I'm investigating the possibility to manipulate the beat per second of an html5 audio tag.

Natively the tag offers the playbackspeed. Unfortunately the granularity is not fine enough.

Let's for example assume a modern pop song, and let's say the current BPM values is 128.

I'd love to be able to slow done the track by 1bpm, or probably even 0.1bpm, or even better 0.05 bpm (which is today pretty normal for almost all audio software).

Also, consider there are 2 way to change BPM, once is by maintaining the key and the other by not maintaining it.

In the first case, you speed up the track but the pitch doesn't change, in the second case it does.

Was wondering if anyone out there has been working on this, manipalting directly the byte data.

Snick
  • 1,022
  • 12
  • 29

1 Answers1

1

I liked the both statements 

"According to WebAudio specification (http://www.w3.org/TR/webaudio/) you CAN" AND

"When I found out that IE doesn't support webaudio, it made it pointless."

at: http://www.html5gamedevs.com/topic/6255-can-you-change-audio-pitch-at-runtime/

Anyway a nice demo to 'steal with pride':

https://github.com/urtzurd/html-audio

Quicker
  • 1,247
  • 8
  • 16
  • the problem of that demo is that uses the native api that execute a pitch of x2 or x0.5, and as said above it doesn't offer the granularity to do a proper pitch shift / tempo control. – Snick Apr 04 '16 at 17:47
  • in order to change the bpm a software first needs to find out, which bpm the song currently runs on. this exceeds browser capabilities to my knowledge - follow links from here "http://stackoverflow.com/questions/657073/how-to-detect-the-bpm-of-a-song-in-php" to understand how you could code bpm determination of a song on server side. from there you can easily progress with x0.02 or something on client side. E.g. once you know a song has 128 BPM, to add 1 BPM requires you to pitch a factor of 1+1/128 => 1.0078125 – Quicker Apr 04 '16 at 18:27
  • alternative to html5 and javascript is flash: see http://blog.andre-michelle.com/2009/pitch-mp3/ AND http://www.swftools.org/ ; the issue with predetermining the bpm nr, if pitch is required to change bpm exactly cannot be fixed that way – Quicker Apr 04 '16 at 18:39
  • you can determinate bpm in javascript, and is not too hard. http://tech.beatport.com/2014/web-audio/beat-detection-using-web-audio/ Also, please do not suggest flash when asking for a javascript implementation – Snick Apr 04 '16 at 19:22
  • nice - so you got it then. use the heuristics described on the Joe Sullivan side to determine the BPM, calculate your pitch factor as shown in comment 2 and use the pitch function shown in github.com/urtzurd/html-audio to set that fine grain pitch alive - tick for part one of your question. – Quicker Apr 04 '16 at 21:04
  • for part two of your question look at http://stackoverflow.com/questions/59936/slowing-down-the-playback-of-an-audio-file-without-changing-its-pitch – Quicker Apr 04 '16 at 21:04
  • btw. sorry for actionscript sidestep - did not want to distract from the topic - my intension was to add value and offer an option for readers that would like to work around low browser support for web audio... I was not sure, if that is an issue for you... – Quicker Apr 04 '16 at 21:08
  • The problem is that is not fine grain enough. Ie.: 128 bpm normal pitch. Let's say i want to pitch the track at 127.5. If I do 0.99x with the standard api, it goes straight to 126.4 (which is 1% less of the overall pitch). – Snick Apr 05 '16 at 16:23
  • 1
    I do not get your point. According to spec the value of of audio-param (->type of playbackRate) is of type float (https://www.w3.org/TR/webaudio/#idl-def-AudioParam). So do not set it to 0.99x, but to 0.999x or to 0.9999x or any other fine grain float value. To reduce 127.5 bpm to 127.4 bpm your pitch must be 0.999215686x. – Quicker Apr 05 '16 at 18:37
  • Let me have a quick try, if that's correct, that would be great! Unfortunately I'm not 100% sure about it! (I think browser implementation is with 2 digits, but let me try). – Snick Apr 05 '16 at 19:50
  • And you are right, at least in chrome, it takes floats. Enjoy your well deserved bounty – Snick Apr 05 '16 at 20:25