html 音乐切换不暂停,web-audio-api可视化音乐播放器，实现暂停切换歌曲功能，粉色系专场~...

可视化的音乐播放器，可戳我观看效果

了解Web-Audio-Api

基础知识

标签是HTML5的新标签，通过添加src属性实现音乐播放。

AudioContext是音频播放环境，原理与canvas的绘制环境类似，都是需要创建环境上下文，通过上下文的调用相关的创建音频节点，控制音频流播放暂停操作等操作，这一些操作都需要发生在这个环境之中。

try{

var audioCtx = new (window.AudioContext || window.webkitAudioContext)();

}catch(e){

alert('Web Audio API is not supported in this browser');

}

AudioNode接口是一个处理音频的通用模块，它可以是音频音源模块，音频播放设备模块，也可以是中间音频处理模块。不同的音频节点的连接(通过AudioContext.connect())，以及终点连接AudioContext.destination(可以看作是连接到耳机或扬声器设备)完成后，才能输出音乐。

常见的音频节点：

AudioBufferSourceNode: 播放和处理音频数据

AnalyserNode: 显示音频时间和频率数据 (通过分析频率数据可以绘制出波形图之类的视图，可视化的主要途径)

GainNode: 音量节点，控制音频的总音量

MediaElementAudioSourceNode: 关联HTMLMediaElement，播放和处理来自和元素的音频

OscillatorNode: 一个周期性波形，只创建一个音调

...

运行模式

创建音频上下文

在上下文中，创建音频源

创建音频节点，处理音频数据并连接

输出设备

image

创建音频上下文

try{

var audioCtx = new (window.AudioContext || window.webkitAudioContext)();

}catch(e){