HTML5创建真实音乐波形图，使用 wavesurfer 快速实现

一、 介绍

    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>
            <span>00</span>
            <span>:</span>
            <span>12</span>
        </div>
    </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>

 

这篇好文章是转载于：学新通技术网