文档章节

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

p
 panyibao
发布于 2017/04/21 22:40
字数 916
阅读 61
收藏 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

没有更多内容

加载失败,请刷新页面

加载更多

docker update:更新一个或多个容器的配置

更新容器的配置 docker update:更新一个或多个容器的配置。 具体内容请访问:https://docs.docker.com/engine/reference/commandline/update/#options 语法:docker update [OPTIONS] CONTA...

lwenhao
28分钟前
1
0
unload事件

unload事件不触发的原因分析 1.代码位置不对,应该优先加载,不能放到回调函数中 2.浏览器不支持 3.最可能的原因,unload事件中触发的函数是一个异步执行的函数,浏览器是不允许在窗口关闭之后在...

狮子狗
40分钟前
1
0
DbForge Schema Compare for MySQL入门教程:如何连接到数据库

【dbForge Schema Compare for MySQL下载】 要创建连接: 1. 在“Connection” 工具栏上单击“New Connection”按钮 。 2. 在“Host” 框中输入主机名。 3. 在“Port” 框中输入端口信息。默...

Miss_Hello_World
43分钟前
1
0
公众号关联微信小程序

公众号关联小程序发送关联通知,对于推广小程序有着很大的帮助。所以问题来了,怎么做到在公众号关联小程序发送关联通知呢? 一:开发中遇到的问题 之前在开发过程中发现,公众号已经关联小程...

Code辉
55分钟前
1
0
并发编程基础之JMM学习摘要

一、JMM定义 Java内存模型即Java Memory Model(JMM),JMM决定一个线程对共享变量的写入何时对另一个线程可见(内存可见性),从抽象的角度来看,JMM定义了线程和主内存之间的抽象关系:线程...

狠一点
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部