本文出至：学新通博客

一、 介绍

    wavesurfer.js是一种可自定义的音频波形可视化，构建在 Web 音频 API和HTML5 画布之上。

    使用wavesurfer.js，您可以创建从 HTML5 音频播放器到复杂 DJ 应用程序等任何内容。

    官方网址:  wavesurfer.js

二、 使用方法

    1、 引入

<script src="https://unpkg.com/wavesurfer.js"></script>

    2、 创建容器

<div id="waveform"></div>

    3、 编写js

var wavesurfer = WaveSurfer.create({
            container: '#waveform',
            waveColor: 'violet',
            progressColor: 'purple'
        });

    4、 加载播放的音频

wavesurfer.load('audio.wav');

三、 浏览器支持

    wavesurfer.js在现代支持网络音频的浏览器上运行，包括火狐、Chrome、Safari（桌面和手机）和歌剧。

四、 下面是我封装的使用方法

    1、 css

.music-list-all {width: 100%;display: -webkit-inline-box;background: #03a9f4;height: 65px;margin: 0 auto;text-align: center;margin-bottom: 9px;border-radius: 8px;line-height: 60px;cursor: pointer;}
        .music-list-all>div>img {cursor: pointer;width: 57%;}
        .music-list-all>div:nth-child(1){width: 8%;}
        .music-list-all>div:nth-child(2){width: 80%;}
        .music-list-all>div:nth-child(3){
        width: 12%;}

    2、 html

<div class="music-list-all">
            <div music-status="false"><img class="music-play" audio-id="audio_{$k}" src="/static/images/music/play2.png" alt=""></div>
            <div><div id="listaudio_{$k}" wavesurfer-id="audio_{$k}" style="z-index: 1;width: 100%; height: 65px;" class="audioPlay wavesurfer" audio-src="https://video1.rfstock.com/059871327_prev.m4a"></div></div>
            <div><span>00</span><span>:</span><span>12</span></div>
        </div>

    3、 js

<script src="https://unpkg.com/wavesurfer.js"></script>

<script>
        var wavesurferAll = new Array();
        //创建波形图
        $('.wavesurfer').each(function(k, v){
            wavesurferAll['#list' + $(this).attr('wavesurfer-id')] = createMusicPic($(this).attr('wavesurfer-id'));
        });
        $('.music-play').click(function(){
            var _this = $(this);
            var audio_id = _this.attr('audio-id');
            var currentPlayAudio = wavesurferAll['#list' + audio_id];
            var player = _this.parent();
            if (player.attr('music-status') == 'false'){
                player.attr('music-status', 'true');
                currentPlayAudio.play();
                _this.attr('src', '/static/images/music/pause2.png');
            }else {
                player.attr('music-status', 'false');
                currentPlayAudio.pause();
                _this.attr('src', '/static/images/music/play2.png');
            }
            currentPlayAudio.on("seek", () => {
                currentPlayAudio.play();
                _this.find('img').attr('src', '/static/images/music/pause2.png');
            });
            currentPlayAudio.on("finish", () => {
                currentPlayAudio.pause();
                _this.find('img').attr('src', '/static/images/music/play2.png');
            });
        });
        //音频轨道波形图
        function createMusicPic (audio_id) {
            if (!$('#list' + audio_id).attr('audio-src')) return false;
            //音频轨道
            let wavesurfer = WaveSurfer.create({
                    container: '#list' + audio_id,
                    barWidth: 1,
                    height: 65,
                    waveColor: '#ffffff',
                    progressColor: '#6b6464',
                    cursorColor: '#6b6464',
                    cursorWidth: 1
                });
            wavesurfer.load($('#list' + audio_id).attr('audio-src'));
            return wavesurfer;
        }
        </script>

本文出至：学新通博客