这是之前写的用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,对接完成了。

我把背景色改了一下,不用渐变色了,还是用纯色吧。

这样就完成了,这算是一个简单版本的。

不过原理都是一样的,我已经把这个音轨对接的代码整合到之前的版本了。

演示站点

http://jacksky.d113.163ns.cn/music/index.html

嗯,音乐播放器系列到此为止就算是结束了,感谢各位的捧场。

【大结局】《从案例中学习JavaScript》之酷炫音乐播放器(四)的更多相关文章

  1. [ 原创 ]学习笔记-做一个Android音乐播放器是遇到的一些困难

    最近再做一个安卓的音乐播放器,是实验室里学长派的任务,我是在eclipse上进行开发的,由于没有android的基础,所以做起来困难重重. 首先是布局上的困难 1.layout里的控件属性不熟悉 2. ...

  2. 【Blazor】在ASP.NET Core中使用Blazor组件 - 创建一个音乐播放器

    前言 Blazor正式版的发布已经有一段时间了,.NET社区的各路高手也创建了一个又一个的Blazor组件库,其中就包括了我和其他小伙伴一起参与的AntDesign组件库,于上周终于发布了第一个版本0 ...

  3. JS学习笔记(6)--音乐播放器

    说明(2017.3.15): 1. lrc.js里面存储LRC歌词的格式的数组,获取里面的时间轴,转为秒数. 2. 通过audio.currentTime属性,setinterval每秒获取歌曲播放的 ...

  4. Android大作业 --音乐播放器

    1.项目成员(本次作业主要对上一次的音乐播放器进行完善) 韦家城 学号:1600802026 班级:161  博客:https://www.cnblogs.com/ln9969cc/ 邓乾尧 学号:1 ...

  5. 小菜学习Winform(二)WMPLib实现音乐播放器

    前言 现在网上有很多的音乐播放器,但好像都不是.net平台做的,在.net中实现音乐文件的播放功能很简单,下面就简单实现下. SoundPlayer类 在.net提供了音乐文件的类:SoundPlay ...

  6. Android学习笔记_24_多媒体MediaPlayer对象之音乐播放器与SoundPool声音池

    一.MediaPlayer对象常用方法介绍: MediaPlayer mediaPlayer = new MediaPlayer(); if (mediaPlayer.isPlaying()) { m ...

  7. 使用 原生js 制作插件 (javaScript音乐播放器)

    1.引用页面 index.html <!DOCTYPE html> <html lang="en"> <head> <meta chars ...

  8. Asp.Net MVC中Aplayer.js音乐播放器的使用

    1.前言: Aplater.js是一款可爱.漂亮的Js音乐播放器,以前就了解过也弄过一些,现在就用mp3的格式来在.Net里面开发.管网 https://aplayer.js.org/ 2.入手: 在 ...

  9. ios开发学习- 简易音乐播放器2 (基于iPhone4s屏幕尺寸)-- 歌词解析--plist文件应用--imageNamed图片加载耗内存

    声明:(部分图片来自网络,如果侵犯了您的权益请联系我,会尽快删除!) 又是音乐播放器,不过这次和上次不一样了,准确说这次更像播放器了,初学者不建议看这个,可以先看前面一个音乐播放器(1),当然 我没加 ...

随机推荐

  1. SVN Server for Migration

    SVN Server: http://mxsuse01/svn/repos/erp/Oracle_EMS Report SVN (Put to SVN Sort) 1. *.RDF 2. *CP.LD ...

  2. 完美解决 Linux 下 Sublime Text 中文输入

    首先,我参考了好几篇文章,都是蛮不错的,先列出来: sublime-text-imfix:首先推荐这个方法,最简单,但是在我的系统上有些问题.可用这个的强烈推荐用这个 完美解决 Linux 下 Sub ...

  3. sublime text 如何新建,删除,重命名等问文件的快速操作

    引用自: stackoverflow 可以使用插件, Sidebar Enhancements, 按ctrl+shift+p 输入install package回车 搜索该插件后即可完成

  4. Lesson 9 A cold welcome

    Text On Wednesday evening, we went to the Town Hall. It was the last day of the year and a large cro ...

  5. 剑指Offer面试题:34.翻转单词顺序VS左旋转字符串

    一.题目一:翻转单词顺序 1.1 题目说明 题目一:输入一个英文句子,翻转句子中单词的顺序,但单词内字符的顺序不变.为简单起见,标点符号和普通字母一样处理.例如输入字符串"I am a st ...

  6. WebForms VS. MVC(翻译)

    (本文翻译自CodeProject上阿三写的一篇文章,原文地址:http://www.codeproject.com/Articles/528117/WebForms-vs-MVC,讲了有关ASP.A ...

  7. 深入挖掘.NET序列化机制——实现更易用的序列化方案

    .NET框架为程序员提供了“序列化和反序列化”这一有力的工具,使用它,我们能很容易的将内存中的对象图转化为字节流,并在需要的时候再将其恢复.这一技术的典型应用场景包括[1] : 应用程序运行状态的持久 ...

  8. <canvas>设置宽高遇到的问题

    在使用<canvas>元素时必须设置宽度和高度,指定可以绘画的区域大小.但是这里设置宽度和高度的时候有一个小问题. 样例代码: <!DOCTYPE html> <html ...

  9. Cookie与Session

    再说Cookie与Session之前,先要了解一下http协议. 何为http协议: http协议即超文本传输协议,一种基于浏览器请求与服务器响应的协议,该协议主要的特点就是它是一种无状态的协议(只针 ...

  10. Entity Framework Code First添加修改及删除单独实体

    对于一个单独实体的通常操作有3种:添加新的实体.修改实体以及删除实体. 1.添加新的实体 Entity Framework Code First添加新的实体通过调用DbSet.Add()方法来实现. ...