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

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

music

*{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;

}

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.