# Adding sound file player with Speed control

**URL:** <https://forum.bootstrapstudio.io/t/adding-sound-file-player-with-speed-control/8436>\
**Category:** Webdesign Help\
**Created:** [February 16, 2022, 11:06pm UTC](https://forum.bootstrapstudio.io/t/adding-sound-file-player-with-speed-control/8436 "2022-02-16T23:06:43Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![davo2579](https://forum.bootstrapstudio.io/letter_avatar_proxy/v4/letter/d/97f17d/32.png) [@davo2579](https://forum.bootstrapstudio.io/u/davo2579)\
**Post date:** [February 16, 2022, 11:06pm UTC](https://forum.bootstrapstudio.io/t/adding-sound-file-player-with-speed-control/8436/1 "2022-02-16T23:06:43Z")

</div>

I am developing a music site that requires a list of sound files (mp3s) to be played on selection and for the user to be able to control the playback speed to make learning easier.  
Looking for any suggestions.  
Dave

---

<div class="post-metadata">

**Author:** ![kuligaposten](https://forum.bootstrapstudio.io/user_avatar/forum.bootstrapstudio.io/kuligaposten/32/1190_2.png) [@kuligaposten](https://forum.bootstrapstudio.io/u/kuligaposten)\
**Post date:** [February 17, 2022, 12:25am UTC](https://forum.bootstrapstudio.io/t/adding-sound-file-player-with-speed-control/8436/2 "2022-02-17T00:25:34Z")

</div>

That is build in in the audio component. If you want a visual control you can add a range input  
here is an example

> **[Audioplayer](https://audioplayer.bss.design/)**
>
> Audioplayer with a simple visual speed control

---

<div class="post-metadata">

**Author:** ![davo2579](https://forum.bootstrapstudio.io/letter_avatar_proxy/v4/letter/d/97f17d/32.png) [@davo2579](https://forum.bootstrapstudio.io/u/davo2579)\
**Post date:** [March 2, 2022, 11:52pm UTC](https://forum.bootstrapstudio.io/t/adding-sound-file-player-with-speed-control/8436/3 "2022-03-02T23:52:46Z")

</div>

Thanks for the response, however all I got with the link was a 404 message!  
Dave

---

<div class="post-metadata">

**Author:** ![printninja](https://forum.bootstrapstudio.io/user_avatar/forum.bootstrapstudio.io/printninja/32/481_2.png) [@printninja](https://forum.bootstrapstudio.io/u/printninja)\
**Post date:** [May 24, 2022, 1:00am UTC](https://forum.bootstrapstudio.io/t/adding-sound-file-player-with-speed-control/8436/4 "2022-05-24T01:00:06Z")

</div>

In the Studio panel, scroll down to Misc and you’ll find the standard HTML Audio component.

You’d have to write some custom JS to control the playback speed, like in this example…  
https://codepen.io/codepo8/embed/preview/ZEpvBJJ?default-tabs=js%2Cresult&height=300&host=https%3A%2F%2Fcodepen.io&slug-hash=ZEpvBJJ

If you search around with Google, you might be able to find a free javascript player that has speed control. There are, of course, many paid options…

> **[10 Best HTML5 Audio Players](https://code.tutsplus.com/tutorials/15-best-html5-audio-players--cms-28796)**
>
> By adding a premium HTML5 audio player to your website, you will be able to share your audio files in a visually appealing and interactive way.

---

<div class="post-metadata">

**Author:** ![kuligaposten](https://forum.bootstrapstudio.io/user_avatar/forum.bootstrapstudio.io/kuligaposten/32/1190_2.png) [@kuligaposten](https://forum.bootstrapstudio.io/u/kuligaposten)\
**Post date:** [May 24, 2022, 1:35am UTC](https://forum.bootstrapstudio.io/t/adding-sound-file-player-with-speed-control/8436/5 "2022-05-24T01:35:59Z")

</div>

> [@printninja](#):
>
> You’d have to write some custom JS to control the playback speed

One don’t need custom js for control the playback speed, it is built in in the audio component

---

<div class="post-metadata">

**Author:** ![printninja](https://forum.bootstrapstudio.io/user_avatar/forum.bootstrapstudio.io/printninja/32/481_2.png) [@printninja](https://forum.bootstrapstudio.io/u/printninja)\
**Post date:** [May 24, 2022, 4:53am UTC](https://forum.bootstrapstudio.io/t/adding-sound-file-player-with-speed-control/8436/6 "2022-05-24T04:53:10Z")

</div>

You are correct. I haven’t added this to a website in years. It seems I didn’t look closely enough.

> **[W3Schools online HTML editor](https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_audio_playbackrate)**
>
> The W3Schools online code editor allows you to edit code and view the result in your browser

---

<div class="post-metadata">

**Author:** ![davo2579](https://forum.bootstrapstudio.io/letter_avatar_proxy/v4/letter/d/97f17d/32.png) [@davo2579](https://forum.bootstrapstudio.io/u/davo2579)\
**Post date:** [May 30, 2022, 3:29am UTC](https://forum.bootstrapstudio.io/t/adding-sound-file-player-with-speed-control/8436/7 "2022-05-30T03:29:32Z")

</div>

Thanks for the suggestions. I will try them out.  
Dave