【大结局】《从案例中学习JavaScript》之酷炫音乐播放器（四）

时间：2022-08-29 20:57:51

这是之前写的用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;

}

这个表示从上往下，上面是天蓝色，渐变到下面的纯白色。有一个过渡的效果。

界面：

【大结局】《从案例中学习JavaScript》之酷炫音乐播放器（四）

从图中可以看到，页面上只有顶部有一条蓝色的线，这是因为目前的页面还没有任何东西。这个属性需要你body区域里有实实在在的东西，才能把高度给撑开。

当然，如果你用纯色，不使用 linear-gradient ，就没关系。

比如你直接写：

body {

    background:lightskyblue;

}

效果：

【大结局】《从案例中学习JavaScript》之酷炫音乐播放器（四）

这样就没关系。

OK，继续，我们给body区域添加一个div，作为我们的音轨盒子。

<div class='box'></div>

设置一下他的css样式

.box {

	width: 500px;

    height: 275px;

    background: #666;

    position: relative;

    margin: 100px auto;

}

效果：

【大结局】《从案例中学习JavaScript》之酷炫音乐播放器（四）

这样是不是就有了。

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;

}

【大结局】《从案例中学习JavaScript》之酷炫音乐播放器（四）

然后，把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;

}

【大结局】《从案例中学习JavaScript》之酷炫音乐播放器（四）

我引入了一首音乐，现在点击播放按钮，就已经可以播放音乐了。

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);

	});

}

效果：

【大结局】《从案例中学习JavaScript》之酷炫音乐播放器（四）

OK，对接完成了。

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

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

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

演示站点

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

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

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

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

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

  2. 【Blazor】在ASP&period;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学习笔记&lowbar;24&lowbar;多媒体MediaPlayer对象之音乐播放器与SoundPool声音池

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

  7. 使用 原生js 制作插件 &lpar;javaScript音乐播放器&rpar;

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

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

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

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

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

随机推荐

  1. SQLServer复制表

    把a的表结构复制到a1表,1＝2不复制数据,如果要复制数据,就不要whereselect * into a1 from a where 1=2注意:这种方式不能复制主键.索引等信息如果要全部复制,只能 ...

  2. Android studio 程序升级和sdk manager 升级方法

    在中国使用android有点郁闷,经常被屏蔽.常遇到2个升级问题,现在总结如下:  1.android studio升级时提示 Connection failed. Please check your ...

  3. &lbrack;codevs3862&rsqb;竞赛班的垃圾处理

    题目描述 Description 竞赛班的师弟们都很懒,每个人都不喜欢倒垃圾,结果垃圾就会跟师兄的RP一样越堆越多,当然,老师时不时就会叫他们去倒垃圾.由于他们真的很懒,他们只会直接将垃圾桶最上面袋拿 ...

  4. 移动终端学习1&colon;css3 Media Queries简介

    移动终端学习之1:css3 Media Queries简介 1.简介 这篇文章写的不错,我就不重复了,来个链接:http://www.w3cplus.com/content/css3-media-qu ...

  5. Node填坑教程——常用库

    作为函数式编程来说,流程控制和函数库是必不可少的(应该吧). 下面我们介绍两个常用的库. lodash:完整的api请参阅,https://lodash.com/docs.这里我们只演示几个简单的例子 ...

  6. 老李教你性能测试监控工具nmon

    老李教你性能测试监控工具nmon   loadrunner的某些性能监控器不够强大,这就需要我们利用更好的工具进行监控,在项目中我们会用nmon工具作为辅助性能监控的工具,帮助我们进行性能分析,pop ...

  7. ARM汇编指令集&lowbar;学习笔记（1）

    一.什么是ARM汇编? 运行在ARM处理器上的汇编语言就叫ARM汇编. C程序运行在X86平台,底层就是X86汇编:运行在ARM平台,底层就是ARM汇编.ARM汇编与X86汇编有显著区别. X86属于 ...

  8. mysql行转列（多行转一列）

    场景 比如说一个订单对应多条数据,当状态(status)=1的时候,  数量(num)=25,当状态(status)=2的时候,  数量(num)=45,现在想用一条sql记录下不同状态对应的数量为多 ...

  9. SSM数据库数据导出excel

    首先,这是我对自己的需求而使用的逻辑,若有可以完美的地方方便告诉下小白. apache的poi MAVEN <dependency> <groupId>org.apache.p ...

  10. 为iOS设计：图形和性能

    在之前的文章里,我们探讨了基于多种不同技术来实现自定义的UIButton,当然不同的技术所涉及到的代码复杂度和难度也不一样.但是我也有意提到了基于不同方法的实现所体现出的性能表现也不一一相同. [在屏 ...

相关文章