audio 标签设置倍速 - playbackRate

May21☀️

已于 2024-05-16 18:23:24 修改

阅读量1.2k

点赞数 10

文章标签：前端 html5

于 2024-05-16 16:07:10 首次发布

本文链接：https://blog.csdn.net/weixin_43756494/article/details/138964194

版权

playbackRate 属性

定义和用法
PlaybackRate 属性设置或返回音频的当前播放速度。
属性值 - 默认值 1.0
语法

audioObject.playbackRate = playbackspeed

完整代码：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>audio</title>
    <style>
        audio{
            display: block;
            margin-top: 10px;
        }
        button{
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <div class="text">
        <span>当前播放速度是：</span>
        <span id="speed">1</span>
    </div>
    <audio id="myAudio" src="happy.mp3" controls></audio>
    <button onclick="setPlaySpeed()" type="button">将音频设置为4倍速播放</button>
    <script>
        const x = document.getElementById('myAudio')
        const text = document.getElementById('speed')

        function setPlaySpeed() {
            x.playbackRate = 4
            text.innerText = 4
        }
    </script>
</body>
</html>

实现效果
遇到的问题
- 报错：TypeError: Failed to set the ‘playbackRate’ property on ‘HTMLMediaElement’: The provided double value is non-finite.
- 原因：设置了一个非数字值，或者是一个无限大或无限小的数值。
- 解决：设置有限数值