文档章节

HTML5 Audio 本地音乐播放并显示频谱

p
 panyibao
发布于 2017/04/21 22:40
字数 916
阅读 47
收藏 0
点赞 0
评论 0

 注意样式不是重点,所有css没有解释

<!DOCTYPE html>
<html class=''>
<head>
<title>music</title>
<meta charset='UTF-8'/>
	<style type="text/css">
*{margin: 0;padding: 0; }
html,body {
	height: 100%;
	width: 100%;
	margin-top:5px
}
canvas{
    display: block;
}
#list {
	background: rgba(146, 186, 226, 0.2);
	width: 25%;
	height: 600px;
	display: block;
	float: left;
	overflow-y :auto;
	overflow-x :auto;
}

img {
	height: 10%;
	width: 10%;
}

ul {
	list-style: none;
	margin-left: 8%;
}

.openAndStop{
	width: 100px;
	height: 20px;
	margin-left: 20px;
	float: left;
}
.button{
	float: none;
}
</style>
<script type="text/javascript">

	window.onload = function() {

		var canvas = document.getElementById("mycan");//获取canvas
		var context = canvas.getContext("2d");//获取绘图环境
		var showList = document.getElementById("showList");//获取开始按钮
		var displayList = document.getElementById("displayList");//获取停止按钮
		var list = document.getElementById("list");//音乐选择按钮(原本是音乐列表后来变按钮,没改变量  名)
		var canvasWidth,canvasHeight;//定义变量记录canvas的宽高
		canvasWidth = canvas.width;
		canvasHeight = canvas.height;

		list.width = window.innerWidth*0.25;//初始化选择按钮
		list.height = window.innerHeight;
		showList.style.display = 'none';//是否显示按钮
		showList.onclick = function () {//添加点击事件
			canvas.setAttribute("width",window.innerWidth-list.width-5);
			canvas.setAttribute("height",window.innerHeight*0.9);
			list.style.display = 'block';
			this.style.display = 'none';
			displayList.style.display = 'block';
		};
		displayList.onclick = function () {
			canvas.setAttribute("width",window.innerWidth-5);
			canvas.setAttribute("height",window.innerHeight*0.9);
			list.style.display = 'none';
			this.style.display = 'none';
			showList.style.display = 'block';
		};

		window.onresize = resizeCanvas();//窗口改变重新计算Canvas大小

		function resizeCanvas() {
			canvas.setAttribute("width",window.innerWidth-list.width-5);
			canvas.setAttribute("height",window.innerHeight*0.9);
			canvasWidth = canvas.width;
			canvasHeight = canvas.height;
		}
		resizeCanvas();

		//____________________________________________________________________________________
		//柱状图颜色
		//1. Math.ceil()用作向上取整。 2. Math.floor()用作向下取整。 3. Math.round() 四舍五入取整
		var color = context.createLinearGradient(canvas.width*0.5,0,canvas.width*0.5,300);
		color.addColorStop(0,"#BE77FF");
		color.addColorStop(0.5,"#FF0000");
		color.addColorStop(1,"#FF60AF");
		//倒影渐变
		var colordao = context.createLinearGradient(canvas.width*0.5,300,canvas.width*0.5,600);
		colordao.addColorStop(0,"#FFD9EC");
		colordao.addColorStop(0.5,"#FFAAD5");
		colordao.addColorStop(1,"#FF79BC");
		//____________________________________________________________________________
//AudioContext是用于管理和播放所有的声音(以下为兼容写法)
		window.AudioContext = window.AudioContext || window.webkitAudioContext || window.mozAudioContext || window.msAudioContext;
		requestAnimationFrame = (function(){
			return  window.requestAnimationFrame||
					window.webkitRequestAnimationFrame||
					window.mozRequestAnimationFrame||
					window.msRequestAnimationFrame||
					function( callback ){
						window.setTimeout(callback, 1000 / 60);
					};
		})();

		var audioContext = new window.AudioContext();
		//音频分析器
		var analyser;
		var audio = document.getElementById("myaudio");
		function audioplay() {
			initaudio(audio);//初始化音频分析器
			draw();//绘制频谱
		}

		function initaudio(audio) {
			analyser = audioContext.createAnalyser();
			//analyser.fftSize = 1024;
			audioSrc = audioContext.createMediaElementSource(audio);
			audioSrc.connect(analyser);
			analyser.connect(audioContext.destination);
		}
		var num = 60;
		function draw() {
			//Uint8Array 8位无符号整形类型化数组
			//analyser.frequencyBinCount 实时得到的音频频域的数据的个数为fftSize的一半
			//定义一个Uint8Array数组,大小为analyser.frequencyBinCount
			//计算出采样频率44100所需的缓冲区长度
			var length=analyser.frequencyBinCount*44100/audioContext.sampleRate|0;
			var arr = new Uint8Array(length);

			//getByteFrequencyData()复制音频当前的频域数据(数量是frequencyBinCount)到 (8位无符号整形类型化数组)中
			analyser.getByteFrequencyData(arr);

			//console.log(arr);

			//canvas的2D pixi.js库的时候,其动画的刷新都用requestAnimationFrame替代了setTimeout 或 setInterval
			//它可以帮你以60fps的帧率绘制动画。
			var step = Math.round(arr.length/num);

			context.clearRect(0, 0, canvas.width, canvas.height);

			context.beginPath();
			for (var i = 1; i <= num; i++) {
				var value = arr[step*i];
				//为画笔设置填充渐变
				context.fillStyle = color;
				//由画布中间向两边画矩形
				context.fillRect(canvas.width*0.5-(i-1)*10, 300,7,(-value)+1);//左边
				context.fillRect(i*10 + canvas.width*0.5,300,7,(-value)+1);//右边
				context.fill();//fill() 方法填充当前的图像(路径)。默认颜色是黑色
				//画倒影
				context.fillStyle = colordao;
				context.fillRect(canvas.width*0.5-(i-1)*10,300,7,value+1);
				context.fillRect(i*10 + canvas.width*0.5,300,7, value+1);
				context.fill();
			}
			requestAnimationFrame(draw);
		}


		audio.addEventListener("play()",audioplay());//绑定音频播放事件

		var audioInput = document.getElementById('uploadedFile');
		audioInput.onchange = function() {
			if(!audio.paused){
				audio.pause();//如果音乐正在播放则停止音乐
			}
			if (audioInput.files.length !== 0) {
				var file = audioInput.files[0];//获取选择的文件
				var fileName = file.name;
				var fr = new FileReader();
				fr.readAsDataURL(file);//以DataURL的方式读取
				fr.onload = function(e) {//文件加载完成后处理
					var fileResult = e.target.result;
					if(audioContext===null){
						return;
					}
					document.getElementById("videoName").innerHTML=fileName;//设置文件名
					audio.src = fileResult;//将src设置为刚加载的文件
					audio.play();//播放音乐
				}
			}
		};
	};
</script>
</head>
<body>
	<div id="list" style="">
		<div style="text-align:center;width:100%;">
			<input type="file" id="uploadedFile" style="margin:0 auto;"/>
		</div>
		
		<ul id="vedios">

		</ul>
	</div>
<div>
<div class="button">
	<div class="openAndStop">
		<button id="showList">显示目录</button>
		<button id="displayList">关闭目录</button>
	</div>
</div>
<div id="video">
	<div style="float: left;margin-right:5%;">
		<audio id="myaudio" crossOrigin="anonymous" name="myaudio" src="" controls="controls"></audio>
	</div>
	<div id="videoName" style="color: red;height:33px">Baby Don′t Know Why - Ms.Ooja.mp3</div>
	<div style="width:70%;height:70%;float: left;"><canvas style="background: rgba(120, 158, 255, 0.55);" id="mycan"></canvas></div>
</div>
</div>
</body>
</html>

效果图:

© 著作权归作者所有

共有 人打赏支持
p
粉丝 4
博文 6
码字总数 4203
作品 0
南宁
分享一个老式卡带机风格的HTML5 Audio播放器实现

日期:2012-7-31 来源:GBin1.com 在线演示 本地下载 如果你不知道什么是卡带机的话,恭喜你,你真的非常太年轻,作为八,九十年代播放音乐必备的设备,对于我们这些70,80后的朋友来说会感觉...

gbin1
2012/07/31
0
3
克服 iOS HTML5 音频的局限

简介 过去几年,开发人员一直都在制造完善的交互体验,努力使其可以在浏览器中正确运行。这样的站点通常需要使用浏览器插件 (Flash)。随着智能手机和平板电脑的推出,交互体验看似与新的小部...

tommyfok
2014/02/22
0
0
12个用于播放音乐和视频文件的jQuery插件

也许有时你需要在网站上播放一些音频和视频文件,也许你正在建立一个在线社区需要有分享和播放音乐和视频的功能。下面介绍的这些免费jQuery插件也许有你需要的。 1. Acorn Media Player Acor...

V
2011/07/10
0
0
十道或许你不熟练的前端HTML5的经典面试题

1.什么是HTML5?  答:HTML5是最新的HTML标准。   注意:讲述HTML5推出的设计目的,以及现在市场的使用情况,浏览器支持情况等。。。。 设计目的   HTML5的设计目的是为了在移动设备上支...

懿左左
06/29
0
0
史无前例的 HTML5 资源参考指南

尽管 HTML5 规范在 2014 年之前不会有正式版本,很多设计师已经开始试水高级浏览器已经支持的部分 HTML5 功能。HTML5 为 Web 设计和应用开发打开了一扇全新的门,原生支持了以前只可能使用 ...

李长春
2012/03/02
0
1
html5 + css3 带音效下拉菜单的实现

原文:scripts tutorials (来自脚本教程网的教程,翻译可能有些不对。。。想要试试 音效下拉菜单 在这个教程中我们将讲述如何开发酷炫的音效下拉菜单(html5 + css3)。下拉菜单有css3动画效...

phala
2015/08/06
0
0
Html5桌面app开发引擎 -- Webtop

作为一个Web开发者,也许我们也想做一些桌面App,但是我们不会C++,不会Python,不熟悉传统桌面App的开发模式。当我们学习了开发桌面App了,会发现在后台写控件来控制界面的显示是多么痛苦的...

ForEleven
2012/10/31
0
13
网页音频播放器和视频播放器插件收藏

为了能够使网页展示内容更丰富,音频播放器和视频播放器是必不可少的,这里推荐几款。 10个基于Web的HTML5音乐播放器 15个最好的HTML5视频播放器 介绍当前流行的一些开源flash视频播放器 五个...

小微
2012/04/06
0
0
JS原生系列-DOM篇(延伸)

关于DOM,这就是最后一部分了,这部分都是后台或者最新的dom api,学的时候需要多的记忆一次,有印象有保障! -.ajax的介绍:ajax输出json格式文件 jsonp的介绍 xhr2的介绍 http://www.w3sch...

透笔度
2015/08/10
0
1
HTML5之音频audio知识(部分vedio)

HTML总结(二)【HTML5之音频】 HTML5重点知识之音频 audio标签兼容性: Internet Explorer 9+, Firefox, Opera, Chrome 以及 Safari 支持 <audio> 标签。注释:Internet Explorer 8 以及更早...

ramosy
2015/08/11
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

rabbitmq学习记录(四)

工作队列(公平分配):一个生产者对应多个消费者,生产者直接将消息发送到rabbitmq的队列之中。队列会先给每个消费者轮流发送一条信息,消费者接收到信息并对之处理。如果不反馈处理结果,队...

人觉非常君
5分钟前
0
0
Java 之 反射

反射,剖析 Java类 中的 各个组成部分,映射成 一个个 Java对象,多用于 框架和组件,写出复用性高的通用程序。 测试类代码如下: class Person { private String name; public St...

绝世武神
29分钟前
0
0
华为nova3超级慢动作酷玩抖音,没有办法我就是这么强大

华为nova3超级慢动作酷玩抖音,没有办法我就是这么强大!华为nova3超级慢动作酷玩抖音,没有办法我就是这么强大! 在华为最新发布的nova 3手机上,抖音通过华为himedia SDK集成了60fps、超级...

华为终端开放实验室
34分钟前
0
0
多 SSH Key 实现同一台服务器部署多 Git 仓库

本文以以下需求为背景,介绍详细的做法: 需在同一台服务器同时部署两个不同的 Github 仓库(对 Bitbucket 等 git 服务同样适用) root 用户可在远程登录 SSH 后附上预期的 SSH Key 进行 gi...

yeahlife
37分钟前
0
0
003. es6数值的扩展

一、普通扩展 Number 方法,将字符串、数值转为十进制 : Number('0b111') Number.isFinite() 用来检查一个数值是否为有限的:Number.isFinite(15) Number.isNan() 用来检查一个值是否为NaN N...

秋季长青
51分钟前
0
0
C语言数组和指针的语法糖

对于C语言,我可以这样秀:比如当创建一个数组arr[n]之后,一般我们去遍历数组的时候是for (int i = 0; i < n; i++) { a[i]; }但是我知道下表访问符[]是个语法糖,也就是说a[i]在编译器看来是...

ustbgaofan
59分钟前
0
0
Call to undefined function bcmath()的解决方法

乐意黎的ECS主机环境,Centos7.2 + PHP7 由于使用了bcdiv()函数,运行时总在抛错。 Fatal error: Call to undefined function bcmath() in /usr/loca/apache/htdocs/... on line 4 一查得知:......

dragon_tech
今天
0
0
css优先级

..

architect刘源源
今天
0
0
【转】Twitter的分布式自增ID算法snowflake

结构 snowflake的结构如下(每部分用-分开): 0 - 0000000000 0000000000 0000000000 0000000000 0 - 00000 - 00000 - 000000000000 第一位为未使用,接下来的41位为毫秒级时间(41位的长度可以...

talen
今天
0
0
hive支持行级修改

Hive从0.14版本开始支持事务和行级更新,但缺省是不支持的,需要一些附加的配置。要想支持行级insert、update、delete,需要配置Hive支持事务。 一、Hive具有ACID语义事务的使用场景 1. 流式...

hblt-j
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部