How to change the playback speed of the HTML5 audio player

Last updated on

Product:

Wonder Audio Player Version 6.6 or above

Tutorial:

This tutorial will guide you how to change the playback speed of the audio player.

In Wonder Audio Player version 6.6 or above, step 3 Options tab -> Skin Options, Play mode, there is an option "HTML5 audio playback speed". This will configure the default playback speed of the audio player.

You can also add external buttons, an input box or a range slider to dynamically change the audio playback speed. The online demo is as follows:

Speed input box:
Speed slider:

Extra Playback Speed Buttons

The following HTML code add three speed buttons with unique IDs audio-2-speed05, audio-2-speed1 and audio-2-speed2. If there are multiple players on the same page, the IDs of the buttons must be unique for each player.

<a id="audio-2-speed05" href="#"><button>0.5X Speed</button></a>
<a id="audio-2-speed1" href="#"><button>1X Speed</button></a>
<a id="audio-2-speed2" href="#"><button>2X Speed</button></a>

Please note, CSS IDs can contain only the letters (A-Za-z), the digits (0-9), the hyphen (-) and the underscore (_), and they cannot start with a digit, two hyphens, or a hyphen followed by a digit.

In Wonder Audio Player, edit the player, in step 3 Options tab, Advanced Options, add the following code to the Custom JavaScript input box:

(function($){
  $(document).ready(function() {
    $("#audio-2-speed05").click(function() {
      $("#wonderpluginaudio-AUDIOPLAYERID").data("object").setPlaybackRate(0.5);
      return false;
    });
    $("#audio-2-speed1").click(function() {
      $("#wonderpluginaudio-AUDIOPLAYERID").data("object").setPlaybackRate(1);
      return false;
    });
    $("#audio-2-speed2").click(function() {
      $("#wonderpluginaudio-AUDIOPLAYERID").data("object").setPlaybackRate(2);
      return false;
    });
  });
})(jQuery);

Input Box

You can add an input box so the user can change the playback speed dynamically:

<input id="audio-2-speedinput" type="number" min="0.1" max="5" step="0.1" value="1">

Then add the following JavaScript to Wonder Audio Player, step 3 Options tab, Advanced Options, Custom JavaScript input box:

(function($){
  $(document).ready(function() {
    $("#audio-2-speedinput").change(function() {
      var speed = this.value;
      $("#wonderpluginaudio-AUDIOPLAYERID").data("object").setPlaybackRate(speed);
      return false;
    });
  });
})(jQuery);

Range Slider

If you want to use a range slider to control the playback speed, you can add an input range slider to control the speed and an input box to display the slider value:

<input id="audio-2-speedslider" type="range" min="0.1" max="5" value="1" step="0.1">
<input id="audio-2-speedvalue" type="text" value="1" readonly>

Then add the following JavaScript to Wonder Audio Player, step 3 Options tab, Advanced Options, Custom JavaScript input box:

(function($){
  $(document).ready(function() {
    $("#audio-2-speedslider").change(function() {
      var speed = this.value;
      $("#wonderpluginaudio-AUDIOPLAYERID").data("object").setPlaybackRate(speed);
      $("#audio-2-speedvalue").val(speed);
      return false;
    });
  });
})(jQuery);

You can view the following tutorials for how to style the HTML range slider, add labels and marks to the slider etc: