<!DOCTYPE?html>
<html?lang="en">
<head>
????<meta?charset="UTF-8">
????<meta?name="viewport"?content="width=device-width,?initial-scale=1,user-scalable=no">
????<title>音樂可視化</title>
????<link?rel="stylesheet"?href="style.css">
</head>
<body>
<header>
????<h1>title</h1>
????<ul?class="type"?id="type">
????????<li?data-type="dot">Dot</li>
????????<li?data-type="column"?class="selected">Column</li>
????</ul>
????<p>
?Volume<input?id="volume"?type="range"?min="0"?max="100"?value="50"?/>
????</p>
</header>
<div?class="left">
????<ul?id="list">
????????<li>background_m.mp3</li>
????????<li>menu.mp3</li>
????</ul>
</div>
<div?class="right"?id="box"></div>
<script?src="../jquery-2.1.1.min.js"></script>
<script?src="index.js"></script>
</body>
</html>
@charset?"UTF-8";
*{
????padding:?0;
????margin:?0;
????box-sizing:?border-box;
????/*為元素指定的任何內(nèi)邊距和邊框都將在已設(shè)定的寬度和高度內(nèi)進行繪制*/
}
html,body{
????height:?100%;
}
body{
????font:?14px?"Lucida?Grande",?Helvetica,?Arial,?sans-serif;
????background:?#000;
????color:?#fff;
????text-align:?center;
}
header,?.right,?.left{
????position:?absolute;
}
header{
????left:?10px;
????top:?10px;
????right:?10px;
????height:?150px;
????/*border:?solid?#fff?1px;*/
}
header?h1{
????font-size:?40px;
????height:?60px;
????line-height:?60px;
}
header?.type{
????display:?inline-block;
}
header?.type:after{
????display:?block;
????content:?"";
????clear:?both;?/*在左右兩側(cè)均不允許浮動元素*/
}
header?.type?li{
????list-style-type:?none;
????float:?left;
????height:?30px;
????line-height:?30px;
????width:?80px;
????border-top:?solid?1px?#fff;
????border-right:?solid?1px?#fff;
????border-bottom:?solid?1px?#fff;
????cursor:?pointer;
}
header?.type?li:first-child{
????border-left:?1px?solid?#fff;
????border-top-left-radius:?5px;
????border-bottom-left-radius:?5px;
}
header?.type?li:last-child{
????border-top-right-radius:?5px;
????border-bottom-right-radius:?5px;
}
header?.type?li.selected{
????background-color:?#fff;
????color:?black;
}
.left{
????left:?10px;
????top:?170px;
????bottom:?10px;
????width:?15%;
????border:?solid?#fff?1px;
????overflow:?auto;
}
.left?ul{
????overflow:?auto;
}
.left?ul?li{
????height:?30px;
????line-height:?30px;
????cursor:?pointer;
????overflow:?hidden;
????white-space:?nowrap;
????text-overflow:?ellipsis;
????/*超出顯示為省略號*/
}
.left?ul?li.selected{
????color:?green;
}
.right{
????top:?170px;
????right:?10px;
????bottom:?10px;
????/*calc()?函數(shù)用于動態(tài)計算長度值,運算符前后都需要保留一個空格*/
????left:?calc(15%?+?20px);
????left:?-webkit-calc(15%?+?20px);
????/*border:?solid?#fff?1px;*/
}
input[type="range"]{
????/*滑條*/
????-webkit-appearance:?none;
????height:?8px;
????background:?#999;
????border-radius:?10px;
????outline:?none;
}
input[type="range"]::-webkit-slider-thumb{
????/*滑塊*/
????-webkit-appearance:?none;
????height:?12px;
????width:?12px;
????background:?#fff;
????border-radius:?100%;
}
input[type="range"]::-moz-range-track{
????height:?8px;
????background:?#999;
????border-radius:?10px;
????border:?none;
}
input[type="range"]::-moz-range-thumb{
????height:?12px;
????width:?12px;
????background:?#fff;
????border:?none;
????border-radius:?100%;
}
@media?screen?and?(max-width:?800px),screen?and?(max-height:?500px){
????body{
????????font-size:?12px;
????}
????header{
????????height:?80px;
????}
????header?h1{
????????font-size:?24px;
????????height:?34px;
????????line-height:?34px;
????}
????header?.type?li{
????????height:?16px;
????????line-height:?16px;
????????width:?50px;
????}
????.left,?.right{
????????top:?100px;
????}
}var?lis?=?$("#list?li");
for?(var?i?=?0;?i?<?lis.length;?i++){
????lis[i].onclick?=?function?()?{
????????for?(var?j?=?0;?j?<?lis.length;?j++){
????????????lis[j].className?=?"";
????????}
????????this.className?=?"selected";
????????load(this.innerText);
????};
}
//指定一個音頻上下文
var?ac?=?new?(window.AudioContext?||?window.webkitAudioContext)();
var?xhr?=?new?XMLHttpRequest();
var?gainNode?=?ac[ac.createGain?"createGain":"createGainNode"]();
gainNode.connect(ac.destination);
var?analyer?=?ac.createAnalyser();?//音頻分析對象
var?size?=?32;?//?柱子的數(shù)量?不能小于16
analyer.fftSize?=?size?*?2;
analyer.connect(gainNode);
var?source?=?null;//用來判斷是否當前有已播放歌曲
var?count?=?0;?//避免快速切歌時帶來同時播放幾首歌的bug
var?box?=?$("#box")[0];
var?height,?width;
var?canvas?=?document.createElement("canvas");
var?ctx?=?canvas.getContext("2d");
box.appendChild(canvas);
var?Dots?=?[];?//圓的數(shù)組
function?random(m,?n)?{
????return?Math.round(Math.random()?*?(n?-?m)?+?m);//m至n之間的一個數(shù)
}
function?getDots()?{
????Dots?=?[];
????for?(var?i?=?0;?i?<?size;?i++){
????????var?x?=?random(0,?width);
????????var?y?=?random(0,?height);
????????var?color?=?"rgba("+random(0,?255)+","+random(0,?255)+","+random(0,?255)+",0.1)";
????????Dots.push({
????????????x:?x,
????????????y:?y,
????????????dx:?random(1,?2),
????????????color:?color,
????????????cap:?0
????????});
????}
}
var?line;
function?resize()?{
????height?=?box.clientHeight;
????width?=?box.clientWidth;
????canvas.height?=?height;
????canvas.width?=?width;
????line?=?ctx.createLinearGradient(0,?0,?0,?height);
????line.addColorStop(0,?"red");
????line.addColorStop(0.5,?"yellow");
????line.addColorStop(1,?"green");
????getDots();
}
//onresize?事件會在窗口或框架被調(diào)整大小時發(fā)生
resize();
window.onresize?=?resize;
function?draw(arr)?{
????ctx.clearRect(0,?0,?width,?height);
????var?w?=?width?/?size;?//每個矩形的寬
????var?cw?=?w?*?0.6;
????var?capH?=?cw?>?10???10?:?cw;?//小帽的高度
????ctx.fillStyle?=?line;
????for?(var?i?=?0;?i?<?size;?i++){
????????var?o?=?Dots[i];
????????if?(draw.type?==?"column"){
????????????var?h?=?arr[i]?/?256?*?height;?//每個矩形的高
????????????ctx.fillRect(w?*?i,?height?-?h,?cw,?h);
????????????ctx.fillRect(w?*?i,?height?-?(o.cap?+?capH),?cw,?capH);
????????????o.cap?--;
????????????if?(o.cap?<?0){
????????????????o.cap?=?0;
????????????}
????????????if?(h?>?0?&&?o.cap?<?h?+?40){
????????????????o.cap?=?h?+?40?>?height?-?capH???height?-?capH?:?h?+?40;
????????????}
????????}?else?if?(draw.type?==?"dot"){
????????????ctx.beginPath();
????????????var?r?=?10?+?arr[i]?/?256?*?(height?>?width???width?:?height)?/?10;
????????????ctx.arc(o.x,?o.y,?r,?0,?Math.PI*2,?true);
????????????var?g?=?ctx.createRadialGradient(o.x,?o.y,?0,?o.x,?o.y,?r);//徑向漸變，圓心到半徑大小
????????????g.addColorStop(0,?"#fff");
????????????g.addColorStop(1,?o.color);
????????????ctx.fillStyle?=?g;
????????????ctx.fill();
????????????o.x?+=?o.dx;
????????????o.x?=?o.x?>?width???0?:?o.x;
????????}
????}
}
draw.type?=?"column";?//給draw方法添加一個type屬性
var?types?=?$("#type?li");
for?(var?i?=?0;?i?<?types.length;?i++){
????types[i].onclick?=?function?()?{
????????for?(var?j?=?0;?j?<?types.length;?j++){
????????????types[j].className?=?"";
????????}
????????this.className?=?"selected";
????????draw.type?=?this.getAttribute("data-type");
????}
}
function?load(url)?{
????var?n?=?++count;
????source?&&?source[source.stop???"stop"?:?"noteOff"]();
????xhr.abort();
????xhr.open("GET",?"./music/"?+?url);
????xhr.responseType?=?"arraybuffer";
????xhr.onload?=?function?()?{
????????if?(n?!=?count)return;
????????ac.decodeAudioData(xhr.response,function?(buffer)?{
????????????if?(n?!=?count)return;
????????????var?bufferSource?=?ac.createBufferSource();
????????????bufferSource.buffer?=?buffer;
????????????bufferSource.connect(analyer);
????????????bufferSource[bufferSource.start???'start'?:?'noteOn'](0);
????????????source?=?bufferSource;
????????},function?(err)?{
????????????console.log(err);
????????});
????};
????xhr.send();
}
function?visualizer()?{
????var?arr?=?new?Uint8Array(analyer.frequencyBinCount);
????//?console.log(arr);
????requestAnimationFrame?=?window.requestAnimationFrame?||
????????window.webkitRequestAnimationFrame?||
????????window.mozRequestAnimationFrame;
????function?v()?{
????????analyer.getByteFrequencyData(arr);
????????requestAnimationFrame(v);
????????//?console.log(arr);
????????draw(arr);
????}
????requestAnimationFrame(v);
}
visualizer();
//改變音量大小
function?changeVolume(percent)?{
????gainNode.gain.value?=?percent?*?percent;
}
$("#volume")[0].onchange?=?function?()?{
????changeVolume(this.value/this.max);
};
//執(zhí)行默認50音量大小
$("#volume")[0].onchange();
2022-11-14
自己可以設(shè)置，可以的
2021-10-24
你這個代碼有點多，不好看問題呀