13

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.

Charles
  • 4,372
  • 9
  • 41
  • 80

2 Answers2

24

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.

Jack_of_All_Trades
  • 10,942
  • 18
  • 58
  • 88
  • Does it have to be jQuery? – technophyle Feb 02 '18 at 02:43
  • Anything you can do with jquery you can do with javascript. Jquery is just a javascript library. If you find code that is written in jquery, you can usually put the code in Google and type "convert to javascript" or "javascript equivalent", and something will come up showing how to write it in javascript. I personally am not a fan of importing large libraries (eg jquery) to avoid writing a few tasks in js. – KevinHJ Jun 21 '18 at 14:47
  • 1
    It took me FOREVER to realize that using jQuery to set `playbackRate` with `attr()` wouldn't work. This worked: `var player = $('#audioPlayer'); player.attr('src', fileUrl); player[0].playbackRate = $('#playbackRate').val();` The `[0]` was important. – Ryan Aug 08 '18 at 00:53
-1

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;
tomysshadow
  • 870
  • 1
  • 8
  • 23