本文概述
- 1.下载并包含Wavesurfer.js
- 2.使用库
- 最后的例子
【如何使用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>
编码愉快!
推荐阅读
- 多图详解缓冲区溢出问题
- 在Ubuntu 16.04中如何使用ssocr(七段光学字符识别)识别七段显示内容
- 如何在Ubuntu中安装和设置Android Studio
- 如何使用jsGrid(轻量级网格jQuery插件)为依赖选择进行选择更改(onSelectChange)时附加回调
- 如何从JavaScript中的2个值计算百分比变化(增加和减少)
- 使用Mousetrap在JavaScript中添加键盘快捷键的正确方法
- 如何在Ubuntu 16.04中为PHP 7安装Imagick
- 最佳Python课程(程序员和开发人员应在2020年考虑)
- Python数据科学导论