wavesurfer.js实现音频波纹效果（后端音频地址不支持跨域时可通过获取blob类型文件流解决）

最新推荐文章于 2024-05-09 10:01:29 发布

姝光

最新推荐文章于 2024-05-09 10:01:29 发布

阅读量1.5k

点赞数 3

文章标签：前端音频 javascript

本文链接：https://blog.csdn.net/qq_46370075/article/details/129754069

版权

需求：展示对应音频文件的音频波纹
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://unpkg.com/wavesurfer.js"></script>
    <title>Document</title>
</head>
<body>

    <audio src="./good.mp3" @play="playA" controls></audio>
    <div id="waveform"></div>

    <script>

        // 请求blob文件流形式的音频文件，解决wavesurfer.js不支持跨域问题
        function getSoundUrl(options) {
        	// 具体请求怎么写就看每个人的项目用的是什么了
            return axios.get(url, {responseType: 'blob'})
                .then(res => {
                    if (!res.headers['content-disposition']) {
                        return console.error('文件名称不存在');
                    }
                    // 获取到的blob类型文件地址
                    return URL.createObjectURL(res.data);
                })
                .catch(err => {
                    console.error('文件获取失败');
                })
        };

        function playA() {
            console.log('aaa')
        }

        // 音频url
        let audioUrl = 'https://wavesurfer-js.org/example/media/demo.wav';
        // let audioUrl = this.getSoundUrl(xxx);


        if (audioUrl) {
            const wavesurfer = WaveSurfer.create({
                // 波形图的容器
                container: '#waveform',
                // 已播放波形的颜色
                progressColor: 'orange',
                // 未播放波形的颜色
                waveColor: 'green',
                // 波形图的高度，单位为px
                height: 200,
                // 波形的振幅（高度），默认为1
                barHeight: 0.8,
                // 波形条的圆角
                barRadius: 2,
                // 波形条的宽度
                barWidth: 1,
                // 波形条间的间距
                barGap: 3,
                // 播放进度光标条的颜色
                cursorColor: 'black',
                // 播放进度光标条的宽度，默认为1
                cursorWidth: 1,
                //  波形容器的背景颜色
                backgroundColor: 'white',
                // 音频的播放速度
                audioRate: '1'
            });
            // 这里需要后端支持cors 否则跨域
            // 如果后端不方便支持 则可以请求blob类型的文件流  在请求中加上 responseType: 'blob'
            wavesurfer.load(audioUrl);
        }
    </script>
    
</body>
</html>