HTML5 Audio API示例
HTML5 Audio API示例
汇总记录，非常感谢老师们，大牛们的分享：
示例一和示例二 参考尚硅谷老师的视频教程；
示例三参考链接：https://blog.csdn.net/u011354613/article/details/51272907
示例一：纯js播放自定义音乐
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>首页</title>
<style>
</style>
</head>
<body>
<button id="button">两只老虎</button>
<script type="text/javascript">
window.AudioContext = window.AudioContext||window.webkitAudioContext||window.mozAudioContext;
(function(){
if(!window.AudioContext){
alert("当前浏览器不支持哟！");
return;
}
var btn = document.getElementById("button");
var audioCtx = new AudioContext();
//声音频率数据
var arrFrequency = [261.63, 293.66, 329.63, 261.63, 261.63, 293.66, 329.63, 261.63, 329.63,
349.23, 392.00, 329.63, 349.23, 329.00, 329.00, 440.00, 329.00, 349.23, 329.63, 261.63, 329.00,
440.00, 329.00, 349.23, 329.63, 261.63, 293.66, 196.00, 261.63, 293.66, 196.00, 261.63];
var start = 0;
btn.addEventListener('mouseenter',function(){
var frequency = arrFrequency[start];
if(!frequency){
start = 0;
frequency = arrFrequency[start];
}
start++;
//创建音调控制对象
var oscillator = audioCtx.createOscillator();
//创建音量控制对象
var gainNode = audioCtx.createGain();
//音调音量关联
oscillator.connect(gainNode);
//音量和设备关联
gainNode.connect(audioCtx.destination);
//音色类型指定为正玄波
oscillator.type = "sine";
//设置音调频率
oscillator.frequency.value = frequency;
//先把当前音量设置为0
gainNode.gain.setValueAtTime(0,audioCtx.currentTime);
//声音音量线性从0到1
gainNode.gain.linearRampToValueAtTime(1,audioCtx.currentTime + 0.01);
//声音走起
oscillator.start(audioCtx.currentTime);
//0.5秒时间内音量指数曲线变为0.01
gainNode.gain.exponentialRampToValueAtTime(0.01,audioCtx.currentTime + 0.5);
//关闭声音
oscillator.stop(audioCtx.currentTime + 0.5);
})
})();
</script>
</body>
</html>
示例二：钢琴八音盒
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>钢琴8音盒</title>
<style>
html,body{
margin: 0;
padding: 0;
}
.keys{
margin: 20px auto;
background: #F8F8F8;
padding: 10px;
font-size: 0;
text-align: center;
}
.item-key{
float: left;
width: 40px;
height: 160px;
background: #fff;
border: 1px solid #333;
z-index: 1;
}
.active{
box-shadow: 0 -2px 3px #333 inset;
background: linear-gradient(to bottom,#fff,#ddd);
}
.area{
display: inline-block;
}
.black{
background: #333333;
color: #fff;
height: 80px;
width: 20px;
margin-left: -11px;
margin-right: -11px;
z-index: 2;
position: relative;
}
.black .active{
box-shadow: 0 -2px 3px #fff inset;
background: linear-gradient(#000,#ddd);
}
</style>
</head>
<body>
<div class="keys">
</div>
<script src="./assets/global/plugins/jquery.min.js" type="text/javascript"></script>
<script>
//创建音频上下文
var audioCtx = new AudioContext();
//4个8度，C大调
const voiceList = [
[261.63,277.18,293.66,311.13,329.63,349.23,369.99,392,415.3,440,466.16,493.88],
[523.25,554.37,587.33,622.25,659.26,698.46,739.99,783.99,830.61,880,932.33,987.77],
[1046.5,1108.7,1174.7,1244.5,1318.5,1396.9,1480,1568,1661.2,1760,1864.7,1975.5],
[2093,2217.5,2349.3,2489,2637,2793.8,2960,3136,3322.4,3520,3729.3,3951.1]
];
function buildKey(){
let html = [];
voiceList.forEach(item => {
html.push('<span class="area">');
item.forEach((em,index) => {
if(index == 1 || index == 3 || index == 6 || index == 8 || index == 10){
html.push('<a href="javascript:;" class="item-key black" data-frequency="'+em+'">'+(index + 1)+'</a>');
}else{
html.push('<a href="javascript:;" class="item-key" data-frequency="'+em+'">'+(index + 1)+'</a>');
}
});
html.push('</span>');
})
$('.keys').html(html.join(''));
}
function bind(){
$(document).on('mousedown','.item-key',function(e){
showVoice.call(this);
}).on('mouseup','.item-key',function(e){
stopVoice.call(this);
$(this).off();
}).on('mousedown',function(){
$(this).on('mousemove',function(e){
return false;
}).on('mouseenter','.item-key',function(e){
showVoice.call(this);
}).on('mouseleave','.item-key',function(e){
stopVoice.call(this);
}).on('mouseup',function(){
stopVoice.call(this);
})
});
$(document).on('mouseup',function(){
stopVoice.call(this);
})
}
function bindM(){
$(document).on('touchstart','.item-key',function(e){
showVoice.call(this);
}).on('touchend','.item-key',function(e){
stopVoice.call(this);
$(this).off();
}).on('touchstart',function(){
$(this).on('mousemove',function(e){
return false;
}).on('mouseenter','.item-key',function(e){
showVoice.call(this);
}).on('mouseleave','.item-key',function(e){
stopVoice.call(this);
}).on('touchend',function(){
stopVoice.call(this);
})
});
$(document).on('touchend',function(){
stopVoice.call(this);
})
}
function showVoice(){
let val = $(this).data('frequency');
$(this).addClass('active');
this.gainNode && this.gainNode.gain.setValueAtTime(0,audioCtx.currentTime);
// this.OscillatorNode && this.OscillatorNode.stop(audioCtx.currentTime + 1);
this.oscillator && this.oscillator.stop(audioCtx.currentTime + 1);
//创建音调控制对象
this.oscillator = audioCtx.createOscillator();
//创建音量控制对象
this.gainNode = audioCtx.createGain();
//音调音量关联
this.oscillator.connect(this.gainNode);
//音量和设备关联
this.gainNode.connect(audioCtx.destination);
//音色类型指定为正玄波
this.oscillator.type = "sine";
//设置音调频率
this.oscillator.frequency.value = val;
//先把当前音量设置为0
this.gainNode.gain.setValueAtTime(0,audioCtx.currentTime);
//声音走起
this.oscillator.start(audioCtx.currentTime);
//0.01秒时间内，声音音量线性从0到1
this.gainNode.gain.linearRampToValueAtTime(1,audioCtx.currentTime + 0.01);
}
function stopVoice(){
$(this).removeClass('active');
this.gainNode && this.gainNode.gain.exponentialRampToValueAtTime(0.001,audioCtx.currentTime + 0.6);
//0.8秒后停止声音
this.oscillator && this.oscillator.stop(audioCtx.currentTime + 0.6);
this.oscillator = this.gainNode = null;
$(this).off('mouseenter').off('mouseleave');
}
console.log(navigator.userAgent);
buildKey();
var u = navigator.userAgent;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
var isioS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac Os X/); //ios终端
if(isAndroid || isioS){
bindM()
}else{
bind();
}
</script>
</body>
</html>
示例三：选择文件播放
html代码：
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="HTML5 Audio Spectrum Visualizer">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5 Audio API showcase | Audio visualizer</title>
<link type="text/css" rel="stylesheet" href="style.css">
</head>
<body>
<div id="wrapper">
<div id="fileWrapper" class="file_wrapper">
<div id="info">
HTML5 Audio API showcase | An Audio Viusalizer
</div>
<label for="uploadedFile">Drag&drop or select a file to play:</label>
<input type="file" id="uploadedFile"></input>
</div>
<div id="visualizer_wrapper">
<canvas id='canvas' width="800" height="350"></canvas>
</div>
</div>
<footer>
<small>Star me on <a href="
相关推荐
表格的现在还是较为常用的一种标签，但不是用来布局，常见处理、显示表格式数据。在HTML网页中，要想创建表格，就需要使用表格相关的标签。<table> <tr> <td>单元格内的文字</td> ...