如何使用Wavesurfer.js从JavaScript中的音频文件生成音频波(音频频谱)

本文概述

1.下载并包含Wavesurfer.js
2.使用库
最后的例子

“ 声波是由通过空气等介质传播的能量运动引起的干扰形式” 。只是开个玩笑, 我们不是那么技术！如果你正在某个需要向用户播放某些音频的平台上工作, 例如出售一些音频文件, 那么展示其波形非常棒, 这样用户将对音频的结构和平台印象深刻可以做。愿意在浏览器中制作它吗？那么Wavesurfer.js是适合你的工具。
【如何使用Wavesurfer.js从JavaScript中的音频文件生成音频波(音频频谱)】使用wavesurfer.js, 你可以创建任何东西, 从HTML5音频播放器到复杂的DJ应用程序, 但是在这种情况下, 我们仅向你展示如何创建基本的波形查看器和具有3个单个按钮的简单音频播放器, 即播放, 暂停停下来
1.下载并包含Wavesurfer.jsWavesurfer.js是可自定义的音频波形可视化, 建立在Web Audio API和HTML5 Canvas之上。根据你的工作方式, 你可以通过两种方式加载该库。第一个方法是简单地从CDN或本地副本中将脚本包括在文档中：

< !-- Load using a free CDN --> < script src="http://img.readke.com/220524/0SGA525-0.jpg"> < /script> < !-- Or load it from a local copy --> < script src="http://www.srcmini.com/path-to/wavesurfer.min.js"> < /script>

如果要使用模块捆绑程序, 例如browserify, webpack等, 则需要使用支持此方法的版本。你将需要使用以下命令在你的项目中安装模块：

npm install wavesurfer.js@2.0.0-beta01

然后, 你将可以使用require(” wavesurfer.js” ); 要求该模块。有关该库的更多信息, 请访问官方网站或Github上的官方存储库。
2.使用库Waversurfer真的很容易使用。随着2.0版的介绍, 现在你可以将其与捆绑器一起使用, 而不仅是直接在窗口中使用：
在浏览器中使用VanillaJS
你感兴趣的方法是create方法。唯一需要的参数是container。它可以是唯一的CSS3选择器, 也可以是DOM元素。但是, 你也可以传递任意数量的选项。创建实例后, 你可以使用load方法加载音频文件以创建其波形。音频URL应该来自你自己的域, 或者来自另一个域中支持CORS标头的歌曲的URL：

< !-- a div where the div will be placed --> < div id="audio-spectrum"> < /div> < script> // Create an instance of wave surfer with its configurationvar Spectrum = WaveSurfer.create({container: '#audio-spectrum', // Add some color to the audio spectrumprogressColor: "#03a9f4"}); Spectrum.on("ready", function(){// Do something when the file has been loaded// Do whatever you need to do with the playerSpectrum.play(); Spectrum.pause(); Spectrum.stop(); }); // Load the audio file from your own domain !Spectrum.load('audio-file.mp3'); < /script>

该插件在浏览器中显示全局变量WaveSurfer, 因此一旦脚本加载即可使用。
使用模块捆绑器
Wavesurfer也很容易与webpack, browserify等一起使用。只需要模块而不是使用全局变量即可：

< !-- a div where the div will be placed --> < div id="audio-spectrum"> < /div> < script> // Require the wavesurfer modulevar WaveSurfer = require("wavesurfer.js"); // Create an instance of wave surfer with its configurationvar Spectrum = WaveSurfer.create({container: '#audio-spectrum', // Add some color to the audio spectrumprogressColor: "#03a9f4"}); Spectrum.on("ready", function(){// Do something when the file has been loaded// Do whatever you need to do with the playerSpectrum.play(); Spectrum.pause(); Spectrum.stop(); }); // Load the audio file from your own domain !Spectrum.load('audio-file.mp3'); < /script>

最后的例子以下文档已准备好进行测试, 你只需要提供有效的音频文件即可。在这种情况下, 我们将在浏览器中呈现一个简单的响应音频频谱, 并提供3个控件(即播放, 暂停和停止)。通过CDN包含Wavesurfer的核心文件：

< !DOCTYPE html> < html> < head> < meta http-equiv="Content-Type" content="text/html; charset=utf-8"> < title> AudioSpectrum in JavaScript< /title> < /head> < body> < !-- Create a div where the audio waves will be shown --> < div id="audio-spectrum"> < /div> < !-- Create action buttons --> < input type="button" id="btn-play" value="http://www.srcmini.com/Play" disabled="disabled"/> < input type="button" id="btn-pause" value="http://www.srcmini.com/Pause" disabled="disabled"/> < input type="button" id="btn-stop" value="http://www.srcmini.com/Stop" disabled="disabled" /> < !-- Load the wavesurferscript , in this case from a CDN --> < script src="http://img.readke.com/220524/0SGA525-0.jpg"> < /script> < script> // Store the 3 buttons in some objectvar buttons = {play: document.getElementById("btn-play"), pause: document.getElementById("btn-pause"), stop: document.getElementById("btn-stop")}; // Create an instance of wave surfer with its configurationvar Spectrum = WaveSurfer.create({container: '#audio-spectrum', progressColor: "#03a9f4"}); // Handle Play buttonbuttons.play.addEventListener("click", function(){Spectrum.play(); // Enable/Disable respectively buttonsbuttons.stop.disabled = false; buttons.pause.disabled = false; buttons.play.disabled = true; }, false); // Handle Pause buttonbuttons.pause.addEventListener("click", function(){Spectrum.pause(); // Enable/Disable respectively buttonsbuttons.pause.disabled = true; buttons.play.disabled = false; }, false); // Handle Stop buttonbuttons.stop.addEventListener("click", function(){Spectrum.stop(); // Enable/Disable respectively buttonsbuttons.pause.disabled = true; buttons.play.disabled = false; buttons.stop.disabled = true; }, false); // Add a listener to enable the play button once it's readySpectrum.on('ready', function () {buttons.play.disabled = false; }); // If you want a responsive mode (so when the user resizes the window)// the spectrum will be still playablewindow.addEventListener("resize", function(){// Get the current progress according to the cursor positionvar currentProgress = Spectrum.getCurrentTime() / Spectrum.getDuration(); // Reset graphSpectrum.empty(); Spectrum.drawBuffer(); // Set original positionSpectrum.seekTo(currentProgress); // Enable/Disable respectively buttonsbuttons.pause.disabled = true; buttons.play.disabled = false; buttons.stop.disabled = false; }, false); // Load the audio file from your domain !Spectrum.load('audio-file.mp3'); < /script> < /body> < /html>

编码愉快！