CODEWITHSUNDEEP
javascriptphphtmlhtml5-audio
Kiren S
Kiren S

Reputation: 3097

HTML 5 Audio PlayBackRate in Mobile Browser

playbackRate is not working in mobile browsers (Iphone and Android). Following is the code. When playing in the desktop browsers everything seems to be ok.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <script src="js/jquery.js"></script>
        <!-- Bootstrap Core JavaScript -->
        <script src="js/bootstrap.min.js"></script>
    </head>
    <body>
        <audio src="./audio/Kalimba.mp3" id="audio1"  controls>Canvas not supported</audio>
        <button id="playbutton" >Play</button>
    </body>
    <script type="text/javascript" >
        $(document).ready(function (e) {
            $('#playbutton').click(function () {
                var audioElm = document.getElementById("audio1");
                var playBackSpeed = 0.5;
                audioElm = document.getElementById("audio1");
                audioElm.playbackRate = playBackSpeed; // default speed 1
                audioElm.play();
            });
        });
    </script>
</html>

Upvotes: 1

Views: 733

Answers (1)

Abhijit Annaldas
Abhijit Annaldas

Reputation: 667

Looks like the feature support is limited in few mobile devices.

Reference:

https://developer.mozilla.org/en-US/Apps/Build/Audio_and_video_delivery/WebAudio_playbackRate_explained

A screenshot from the above page below...

enter image description here

Upvotes: 2

Related Questions