Controlling audio speed of a mp3 file

Question

I would like to play a mp3 soundtrack on my website, and manipulate the speed of the soundtrack by a percentage using a slider. I'm wondering how this could be done with only HTML(5) and JavaScript. I haven't been able to find any examples or tutorials, any help would be greatly appreciated.

Answer 1

Something like this:

myaudio=document.getElementById("audio1");
myaudio.playbackRate=0.5;

This is the basics to demonstrate that audio and videos both have property you can set to change the playing rate. The implementation of sliders and other things, you can achieve using jquery based on how you want it.

Answer 2

Well, if you are willing to use a plugin like Quicktime, you could control it using Javascript like so.

<embed src="success.wav" autostart=false width=512 height=32 id="sound1"
enablejavascript="true">
<script>
document.getElementById("sound1").SetRate(0.5);
</script>

To my knowledge, RealPlayer and Windows Media Player do not have a similar option. F̶o̶r̶ ̶V̶L̶C̶ ̶M̶e̶d̶i̶a̶ ̶P̶l̶a̶y̶e̶r̶ ̶y̶o̶u̶ ̶m̶i̶g̶h̶t̶ ̶b̶e̶ ̶a̶b̶l̶e̶ ̶t̶o̶ ̶u̶s̶e̶ ̶̶v̶l̶c̶.̶i̶n̶p̶u̶t̶.̶r̶a̶t̶e̶̶ nevermind, it is a readonly propety. (see the doc https://wiki.videolan.org/Documentation:WebPlugin/ )

I'm not going to get into details with Flash, but Flowplayer seems to be able to play in slow motion http://flash.flowplayer.org/plugins/streaming/slowmotion.html and can also play MP3s apparently http://flash.flowplayer.org/plugins/streaming/audio.html

However, as for the HTML5 audio tag, there is the playbackRate Javascript property, as seen here on w3schools (couldn't find it anywhere else ^^' ) http://www.w3schools.com/tags/av_prop_playbackrate.asp

mySnd=document.getElementById("audio1");
mySnd.playbackRate=0.5;