文档章节

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

p
 panyibao
发布于 2017/04/21 22:40
字数 916
阅读 87
收藏 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
南宁
私信 提问
10 个基于 Web 的 HTML5 音乐播放器

HTML5 是一种用于创建和呈现的网页内容的语言。这是一个革命性的语言,它拥有一些真正棒的功能和一个新的HTML5规范允许本地音频流的播放。本文向你推荐 10 个最棒的 HTML5 音频播放器,看看你...

红薯
2012/04/02
49.9K
8
分享7个漂亮的HTML5视频音频播放器及源码

网页视频音频播放器大家并不陌生,在IE中我们可以运行ActiveX来嵌入微软的Media Player或者其他的本地播放器,当然可能大部分我们都是使用Flash来制作播放器。在HTML5发展迅速的今天,让我们...

tp_wire
2012/07/11
32.7K
5
分享一个老式卡带机风格的HTML5 Audio播放器实现

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

gbin1
2012/07/31
0
3
HTML5 Audio/Video 标签,属性,方法,事件汇总

注:本文内容来源自W3C ,对原文进行了浓缩,但只对chrome浏览器进行了测试和验证。 W3C草案原文地址:http://www.w3.org/TR/html5/video.html 标签属性: src:音乐的URL preload:预加载 ...

红薯
2012/06/27
581
0
请问Flash as3里如何在音乐播放ing的时候触发进度条滚动

为了解决HTML5的audio在IE9以下不能用,所以我昨天花了一天时间来变相解决这个问题。 (ps:我是一个标准的Java后台程序员,Flash不会,美工很烂,所以能实现大部分功能已经很不容易啦) 现在做了个...

废柴大叔
2013/05/19
516
1

没有更多内容

加载失败,请刷新页面

加载更多

Iris框架

1、安装iris: $ go get -u github.com/kataras/iris 2、golang iris web项目热重启 # 安装rizla包 $ go get -u github.com/kataras/rizla # 热重启方式启动iris项目 $ rizla main.go......

Liens
14分钟前
3
0
初探sentinel实践思考

简单说下, sentinel的优势: 友好的控制面板,支持实时监控 多种限流。支持QPS限流,线程数限流,多种限流策略,如:直接拒绝,匀速模式(漏斗),冷启动(如设置限制1000,延迟10秒,那第一...

爱吃大肉包
15分钟前
4
0
转:MongDB分页查询

找到了一篇关于MongDB分页查询的博客 https://www.cnblogs.com/wslook/p/9275861.html

_liucui_
16分钟前
1
0
《边缘云计算技术及标准化白皮书》

12月12日,第八届中国云计算标准和应用大会在北京隆重召开,工业和信息化部党组成员,总工程师张峰先生,中国工程院副院长陈左宁女士,中国工程院院士沈昌祥先生,中国电子技术标准化研究院院...

阿里云官方博客
22分钟前
1
0
网站安全公司对于网站逻辑漏洞的修复方案分享

在网站安全的日常安全检测当中,我们SINE安全公司发现网站的逻辑漏洞占比也是很高的,前段时间某酒店网站被爆出存在高危的逻辑漏洞,该漏洞导致酒店的几亿客户的信息遭泄露,包括手机号,姓名...

网站安全
26分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部