前言：
现时兄弟们对“js点击图片实现播放音乐”大体比较注重，姐妹们都想要学习一些“js点击图片实现播放音乐”的相关资讯。那么小编同时在网络上搜集了一些对于“js点击图片实现播放音乐””的相关内容，希望咱们能喜欢，姐妹们一起来了解一下吧！这是之前写的用H5制作的音乐播放器，前三节其实已经做得差不多了，音轨的制作原理已经在上一节说明，不过一直还没有和音乐对接。
本章作为该系列的一个完结篇，我会专门把动态音轨的实现代码贴出来，demo地址会在文章最后给出。
为了尽可能保持条理清晰，我就重新开一个页面来说明吧。
你把本文的代码拷过去，应该是可以直接运行的。（当然，音乐文件需要换成你本地的）
1. 画一个demo页
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>音轨和音乐对接</title>
</head>
<body>
</body>
</html>
在这个页面的head部分添加一个style块，我就不单独整css文件了，把所有的样式都写在一个页面吧。
给body添加一个线性背景
body { background:-webkit-linear-gradient(top,skyblue 0%,#fff 100%) no-repeat; background:linear-gradient(top,skyblue 0%,#fff 100%) no-repeat;}这个表示从上往下，上面是天蓝色，渐变到下面的纯白色。有一个过渡的效果。
界面：
从图中可以看到，页面上只有顶部有一条蓝色的线，这是因为目前的页面还没有任何东西。这个属性需要你body区域里有实实在在的东西，才能把高度给撑开。
当然，如果你用纯色，不使用 linear-gradient ，就没关系。
比如你直接写：
body { background:lightskyblue;}效果：
这样就没关系。
OK，继续，我们给body区域添加一个div，作为我们的音轨盒子。
<div class='box'></div>
设置一下他的css样式
.box { width: 500px; height: 275px; background: #666; position: relative; margin: 100px auto;}效果：
这样是不是就有了。
2. 音轨制作
我们还是采用span来制作音轨，具体原理和绘制方法已经在上一节中说明，这里不再赘述，我直接上代码了。
在body下方添加一个script块，里面就写我们的js代码：
<script> </script>
我们设置每一条音轨的宽度为10px。
var box = document.getElementsByTagName('div')[0]; //获取承载音轨的父盒子var allWidth = box.clientWidth;//获取承载音轨盒子的宽度var len = (allWidth / 10 ); //计算一共出现多少条音轨 var html = ''; //动态拼接音轨for(var i = 0;i < len ; i ++){ html+="<span class='item' style='left:"+(i*10)+"px;background:#fff;'></span>";}box.innerHTML = html; //添加音轨我们先给每一个span添加一个高度，看看效果
css：
.item { position:absolute; width:10px; height:222px; left:0px; bottom:0px; opacity: 0.96;}然后，把span的高度设置为0。
好的，音轨盒子差不多就这样了。
3. 用audio标签播放音乐
生成默认的audio对象，然后添加到body区域
var audio = document.createElement('audio');audio.src = 'mp3/01.mp3'audio.controls = 'controls';document.body.appendChild(audio);css:
audio { display: block; margin: -100px auto; width: 500px; border-top: 1px solid; border-top-color: #d9dee6;}我引入了一首音乐，现在点击播放按钮，就已经可以播放音乐了。
4. 音轨盒子与音乐对接
这部分涉及到很多H5的属性，主要就是一个解析的过程，我就直接贴代码了。
//1:音频上下文window.AudioContext = window.AudioContext || window.webkitAudioContext || window.mozAudioContext || window.msAudioContext;/*动画执行的兼容写法*/window.requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.msRequestAnimationFrame;//2:初始化音轨对象var audioContext = new window.AudioContext();var flag = null; //控制是否解析的开关变量//拿到播放器去解析音乐文件var audioBufferSouceNode = audioContext.createMediaElementSource(audio);audio.onplay = function(){ flag = true; //创建解析对象 var analyser = audioContext.createAnalyser(); parse(analyser,function(array){ console.log(array); //打印解析出来的音轨节点 for(var i = 0;i < len ; i ++){ document.getElementsByClassName('item')[i].style.height = array[i] + 'px'; } });}audio.onpause = function(){ for(var i = 0;i < len ; i ++){ document.getElementsByClassName('item')[i].style.height = 1 + 'px'; } flag = false;}function parse(analyser,callback){ if(!flag){ return; } audioBufferSouceNode.connect(analyser); analyser.connect(audioContext.destination); var array = new Uint8Array(analyser.frequencyBinCount); analyser.getByteFrequencyData(array); if(callback) callback(array); requestAnimationFrame(function(){ parse(analyser,callback); });}效果：
OK，对接完成了。
我把背景色改了一下，不用渐变色了，还是用纯色吧。
这样就完成了，这算是一个简单版本的。
不过原理都是一样的，我已经把这个音轨对接的代码整合到之前的版本了。
标签： #js点击图片实现播放音乐 #js音乐播放器代码大全 #视频播放器js代码 #js音乐播放 #js网页音乐播放器怎么用
