HTML5可视频谱播放器《孙露最好听的歌曲》
本帖最后由 亚伦影音工作室 于 2024-3-25 15:18 编辑 <br /><br /><style>#papa { margin: 0px 0px; margin-top:0px; margin-left:-300px;width: 1200px; height: 600px; background: gray url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/bda7c4c6df09c1cef57d83008c1ae50d.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; position: relative; overflow:hidden;}
#canvas{ width: 1200px; height: 600px;position: absolute; margin-top:0px; margin-left:0px;opacity: 0.6;overflow:hidden;}
</style>
<div id="papa">
<divclass="items "style="text-align: center;position: absolute;top:-180px; left:200px;z-index: 40;"><divid="lrcArea"></div></div>
<audio id="aud" src="https://p4.t57.cn:8399/2019/xc/1/KTJ.m4a" loopautoplay crossOrigin="anonymous"></audio>
<div class="img_border" ><img id="aplay" style="width: 250px; height: 250px;mask: radial-gradient(transparent 12px,#red 0);-webkit-mask: radial-gradient(transparent 12px,red 0);background: url(http://pan.yinhuabbs.cn/view.php/a60d7a6c4172d96080d4e23d80d9af48.png)0 0/100% 100%,url(https://wj1.kumeiwp.com:812/wj/bl/2022/11/16/78d84421011a0d4a093d73bf6ffd79bc.jpg)0px 0px/150% 100%; "></div>
<canvas id="canvas"></canvas>
</div>
<script>
window.onload = function () {
var oAudio = document.getElementById('aud');
// 创建音频上下文对象
var oCtx = new AudioContext();
// console.log(oCtx);
// 创建媒体源,除了audio本身可以获取，也可以通过oCtx对象提供的api进行媒体源操作
var audioSrc = oCtx.createMediaElementSource(oAudio);
// 创建分析机
var analyser = oCtx.createAnalyser();
// 媒体源与分析机连接
audioSrc.connect(analyser);
// 输出的目标：将分析机分析出来的处理结果与目标点（耳机/扬声器）连接
analyser.connect(oCtx.destination);
// 效果（实现的具体方法）
// 绘制音频图的条数(fftSize)
/*
根据分析音频的数据去获取音频频次界定音频图的高度
放在与音频频次等长的8位无符号字节数组
Uint8Array:初始化默认值为1024
*/
// 利用cancas渐变进行音频绘制
var ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var oW = canvas.width;
var oH = canvas.height;
var color1 = ctx.createLinearGradient(oW / 2, oH / 2 - 30, oW / 2, oH / 2 - 100);
var color2 = ctx.createLinearGradient(oW / 2, oH / 2 + 30, oW / 2, oH / 2 + 100);
color1.addColorStop(0, '#ffffff');
color1.addColorStop(.5, '#fff000');
color1.addColorStop(1, '#f00');
color2.addColorStop(0, '#ffffff');
color2.addColorStop(.5, '#fff000');
color2.addColorStop(1, '#f00');
// 音频图的条数
var count = 200;
// 缓冲区:进行数据的缓冲处理，转换成二进制数据
var voiceHeight = new Uint8Array(analyser.frequencyBinCount);
// console.log(voiceHeight);
function draw() {
// 将当前的频率数据复制到传入的无符号字节数组中，做到实时连接
analyser.getByteFrequencyData(voiceHeight);
// console.log(voiceHeight);
// 自定义获取数组里边数据的频步
var step = Math.round(voiceHeight.length / count);
ctx.clearRect(0, 0, oW, oH);
for (var i = 0; i < count; i++) {
var audioHeight = voiceHeight;
ctx.fillStyle = color1;// 绘制向上的线条
ctx.fillRect(oW / 2 + (i * 10), oH / 2, 7, -audioHeight);
ctx.fillRect(oW / 2 - (i * 10), oH / 2, 7, -audioHeight);
ctx.fillStyle = color2;// 绘制向下的线条
ctx.fillRect(oW / 2 + (i * 10), oH / 2, 7, audioHeight);
ctx.fillRect(oW / 2 - (i * 10), oH / 2, 7, audioHeight);
}
window.requestAnimationFrame(draw);
}
draw();
/*
analyserNode 提供了时时频率以及时间域的分析信息
允许你获取实时的数据，并进行音频可视化
analyserNode接口的fftSize属性
fftSize:无符号长整型值，用于确定频域的FFT(快速傅里叶变换)
ffiSize属性值是从32位到32768范围内的2的非零幂,默认值是2048
*/
}
</script>
<style>
#lrcArea ul,#lrcArea li,#lrcArea ol,#lrcArea {margin: 55px ; padding: 0;list-style: none;}
#lrcArea{width: 980px;
height: 200%;
overflow: hidden;filter:drop-shadow(#ffffff 1px 0 0)drop-shadow(#ffffff 0 1px 0)drop-shadow(#ffffff -1px 0 0) drop-shadow(#ffffff 0 -1px0);
display: block;margin: 0px -100px;}
#lrcArea ul{width: 100%;150px;
text-align: center;
padding: 0;
transition: 0.3s all ease;/*一定要加上不然看着突兀*/
margin: 480px 0px;
}
#lrcArea ul li{height: 0px;
line-height: 0px;
font-family:悟空大字库;
font-size: 0px;
color: #000000;
font-weight: normal;
transition: .3s all ease;/*一定要加上不然看着突兀*/
display: block;
margin: 0px auto;}
#lrcArea ul li.cur{font-size: 35px;
font-family:悟空大字库;text-align: center;
color: #FF0000;
font-weight: bold; margin: 0px auto;}
/*mv动画*/
.img_border{display:inline-block;width:250px;height:250px;position: absolute;top:20px; left:60px;z-index: 14;}
.img_border #aplay{border:2px solid #cccccc;border-radius:50%; transition: .3s all ease;/*一定要加上不然看着突兀*/ }
.z360z{animation:rotating 10s linear infinite;
}@keyframes rotating{
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}
</style>
<style type="text/css">.items{animation: slider 0.26s linear infinite ;}
@keyframes slider {from {opacity: 1;filter:hue-rotate(360deg)contrast(180%)brightness(200%);}
50% {opacity: 1;}to {opacity: 1;filter:hue-rotate(0deg)contrast(140%)brightness(100%);}}
</style>
<script id="lrc" type="text">
孙露最好听的歌曲
女声无损音质串烧专辑B
HTML5可视频谱播放器
点击画面暂停/开启
欢迎朋友填词
出品：亚伦影音工作室
我的音乐我做主
》》》《《《
</script>
<script type="text/javascript">
var musicPlayer = function() {
return this.init.apply(this, arguments);
};
musicPlayer.prototype = {
constructor: musicPlayer,
init:function(options) {
if(isEmptyObj(options) || typeof options !== 'object') return;
this.player = options.player;
this.lrc = options.lrc;
this.lrcArea = options.lrcArea;
//用于保存歌词
this.lrcArr = [];
//用于保存时间戳
this.timestamp = [];
//处理歌词
this.handleLrc(this.lrc);
var that = this;
this.player.addEventListener('play', function() {
that.play();
}, false);
this.player.addEventListener('pause',function() {
that.pause();
}, false);
//歌词索引
this.idx = 0;
},
//格式化歌词
handleLrc:function(lrc) {
var re = /(\[.+\])(.+)?/gm,
ul = cEl('ul'),
frag = document.createDocumentFragment(),
tmpArr,i,len;
this.lrcArea.innerHTML = '';
frag.appendChild(ul);
ul.id = 'c';
this.lrcArea.appendChild(frag);
var txt = lrc.replace(re,function(a,b,c) {
return b + (c === undefined ? ' ' : c) + '\n';
});
tmpArr = txt.split('\n');
//处理歌词
for(i = 0,len = tmpArr.length; i < len; i++) {
var item = trim(tmpArr);
if(item.length > 0) {
this.lrcArr.push(item);
}
}
frag = document.createDocumentFragment();
for(i = 0,len = this.lrcArr.length; i < len; i++) {
var li = cEl('li');
if(i === 0) {
li.className = 'cur';
}
li.innerHTML = this.lrcArr.replace(/\[.+\]/i,'')
.replace('','').replace('','');
//处理时间
this.timestamp.push(this.lrcArr.replace(re,function(a,b,c) {
return b;
}).replace('[','').replace(']',''));
frag.appendChild(li);
}
ul.appendChild(frag);
this.li = g('lrcArea').getElementsByTagName('li');
},
//播放
play:function() {
this.stop = false;
var that = this,
player = this.player,
i,len;
this.t = setInterval(function() {
if(that.stop) return;
that.curTime = player.currentTime;
for(i = 0,len = that.timestamp.length - 1; i < len; i++) {
var prevTime = that.formatTimeStamp( that.timestamp ),
nextTime = that.formatTimeStamp( that.timestamp );
//当前播放时间与前后歌词时间比较，如果位于这两者之间则转到该歌词
if( parseFloat( that.curTime ) > prevTime && parseFloat( that.curTime ) < nextTime ) {
that.scrollToLrc(i);
return;
}
}
},300);
},
//暂停
pause:function() {
this.stop = true;
clearInterval(this.t);
},
//格式化时间
formatTimeStamp:function(timestamp) {
var re = /(+):(+)\.(+)/i,
seconds = timestamp.replace(re,function(a,b,c,d) {
return Number(b * 60) + Number(c) + parseFloat('0.'+ d);
});
return seconds;
},
//歌词滚动
scrollToLrc:function(idx) {
var ds = getOffset(this.li).top,
i,len;
//如果歌词索引没有变动，则认为这句没有唱完，不处理
if(this.idx === idx) return;
//否则更新索引值并更新样式和位置
this.idx = idx;
for(i = 0,len = this.li.length; i < len; i++) {
this.li.className = '';
}
this.li.className = 'cur';
this.lrcArea.scrollTop = ds - this.lrcArea.offsetHeight / 2;
}
};
function g(id) {
return typeof id === 'string' ? document.getElementById(id) : id;
}
function cEl(el) {
return document.createElement(el);
}
function trim(str) {
return str.replace(/(^\s*)|(\s*$)/g, "");
}
function isEmptyObj(o) {
for(var p in o) return false;
return true;
}
function getOffset(el) {
var parent = el.offsetParent,
left = el.offsetLeft,
top = el.offsetTop;
while(parent !== null) {
left += parent.offsetLeft;
top += parent.offsetTop;
parent = parent.offsetParent;
}
return {
left: left,
top: top
};
}
var p = new musicPlayer({
player: g('aud'),
lrc: g('lrc').innerHTML,
lrcArea: g('lrcArea')
});
</script>
<script type="text/javascript">
var my_audio =document.getElementById("aud");my_audio.onended = function(){document.getElementById("aplay").className="";};my_audio.onplaying = function()
{document.getElementById("aplay").className="z360z";};my_audio.onpause = function(){document.getElementById("aplay").className="";};var lyric = parseLyric(lrc);
</script>
频谱没出来？{:4_203:} 哦，出来了，估计是音乐加载慢的缘故。真漂亮。欣赏亚伦老师好帖{:4_187:} 没有看见频谱啊 亚伦好，频谱看见了为什么频谱会滞后怎么久？ 哇瑟~~~这个代码量这么大{:4_203:} 这个估计你代码有问题，频谱出来好慢，频谱出来后不是在页面点击停止频谱，而是整个网页不能点，我回帖打字音乐和频谱就停止了 估计还的修改{:4_170:} 俩字——精典；再加两字：动听！ 两个问题:第一 点击页面任意位置都能暂停或开启。第二 频谱加载迟钝。但手机还可以！请业内高手解决！ 还有一个问题，如何处理跨域问题。普通MP3地址无法使用。
页:
[1]