srcmini本文概述
“声波是由通过空气等介质传播的能量运动引起的干扰形式”。只是开个玩笑, 我们不是那么技术！如果你正在某个需要向用户播放某些音频的平台上工作, 例如出售一些音频文件, 那么展示其波形非常棒, 这样用户将对音频的结构和平台印象深刻可以做。愿意在浏览器中制作它吗？那么Wavesurfer.js是适合你的工具。
使用wavesurfer.js, 你可以创建任何东西, 从HTML5音频播放器到复杂的DJ应用程序, 但是在这种情况下, 我们仅向你展示如何创建基本的波形查看器和具有3个单个按钮的简单音频播放器, 即播放, 暂停停下来
1.下载并包含Wavesurfer.js
Wavesurfer.js是可自定义的音频波形可视化, 建立在Web Audio API和HTML5 Canvas之上。根据你的工作方式, 你可以通过两种方式加载该库。第一个方法是简单地从CDN或本地副本中将脚本包括在文档中：
<!-- Load using a free CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.3.7/wavesurfer.min.js"></script>
<!-- Or load it from a local copy -->
<script src="./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 configuration
var Spectrum = WaveSurfer.create({
container: '#audio-spectrum', // Add some color to the audio spectrum
progressColor: "#03a9f4"
});
Spectrum.on("ready", function(){
// Do something when the file has been loaded
// Do whatever you need to do with the player
Spectrum.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 module
var WaveSurfer = require("wavesurfer.js");
// Create an instance of wave surfer with its configuration
var Spectrum = WaveSurfer.create({
container: '#audio-spectrum', // Add some color to the audio spectrum
progressColor: "#03a9f4"
});
Spectrum.on("ready", function(){
// Do something when the file has been loaded
// Do whatever you need to do with the player
Spectrum.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="Play" disabled="disabled"/>
<input type="button" id="btn-pause" value="Pause" disabled="disabled"/>
<input type="button" id="btn-stop" value="Stop" disabled="disabled" />
<!-- Load the wavesurferscript , in this case from a CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.3.7/wavesurfer.min.js"></script>
<script>
// Store the 3 buttons in some object
var buttons = {
play: document.getElementById("btn-play"), pause: document.getElementById("btn-pause"), stop: document.getElementById("btn-stop")
};
// Create an instance of wave surfer with its configuration
var Spectrum = WaveSurfer.create({
container: '#audio-spectrum', progressColor: "#03a9f4"
});
// Handle Play button
buttons.play.addEventListener("click", function(){
Spectrum.play();
// Enable/Disable respectively buttons
buttons.stop.disabled = false;
buttons.pause.disabled = false;
buttons.play.disabled = true;
}, false);
// Handle Pause button
buttons.pause.addEventListener("click", function(){
Spectrum.pause();
// Enable/Disable respectively buttons
buttons.pause.disabled = true;
buttons.play.disabled = false;
}, false);
// Handle Stop button
buttons.stop.addEventListener("click", function(){
Spectrum.stop();
// Enable/Disable respectively buttons
buttons.pause.disabled = true;
buttons.play.disabled = false;
buttons.stop.disabled = true;
}, false);
// Add a listener to enable the play button once it's ready
Spectrum.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 playable
window.addEventListener("resize", function(){
// Get the current progress according to the cursor position
var currentProgress = Spectrum.getCurrentTime() / Spectrum.getDuration();
// Reset graph
Spectrum.empty();
Spectrum.drawBuffer();
// Set original position
Spectrum.seekTo(currentProgress);
// Enable/Disable respectively buttons
buttons.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> 编码愉快！
评论前必须登录！
注册