捣鼓出来的HTML5频谱播放器 还比较满意！
本帖最后由 亚伦影音工作室 于 2023-12-4 04:27 编辑 <br /><br /><style>#papa { margin: 30px -300px; width: 1200px; height: 600px; background: gray url('https://wj1.kumeiwp.com:812/wj/bl/2022/11/16/78d84421011a0d4a093d73bf6ffd79bc.jpg?t=1670156676&key=cbe38844c04325b1f74d') no-repeat center/cover; box-shadow: 3px 3px 20px #000; position: relative; overflow:hidden;}
#canv { margin: 0px auto 0; display: block; position: absolute; bottom:0px; left: 0px; cursor: pointer; }
</style>
<style type="text/css">
.picBtn {width: 80px;
height: 142px;border: none;
outline: none;
position:absolute; left:880px; top: 440px;z-index: 20;
background: url('https://wj.zp68.com/lxx/yunhua/2022/06/27/13.gif')0 0/100% 100%;
</style>
<div id="papa">
<divclass="items "style="text-align: center;position: absolute;top:30px; left:200px;z-index: 4;"><divid="lrcArea"></div></div>
<div style="position: absolute; left:460px; top: 180px; width:300px; opacity: .95;">
<imgsrc="https://pic.imgdb.cn/item/62c78fb4f54cd3f93783b4d5.gif" alt="" /></div>
<div style="position: absolute; left:360px; top: -10px; width:100%; height: 100%; opacity: .85;">
<imgsrc="https://pic.imgdb.cn/item/62720a52094754312988cb03.gif" alt="" /></div>
<button id="picBtn" class="picBtn"></button>
<div id="audio">
<audio id="aud" src="https://p4.t57.cn:8399/2021/zw/1/FIY.m4a" loop="loop" autoplay="autoplay"controls="controls" crossOrigin="anonymous"></audio></div>
<div class="img_border" ><img id="aplay" style="width: 300px; height: 300px;mask: radial-gradient(transparent 20px,#red 0);-webkit-mask: radial-gradient(transparent 20px,red 0);background: url(http://pan.yinhuabbs.cn/view.php/a60d7a6c4172d96080d4e23d80d9af48.png)0 0/100% 100%,url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/7bceeb8d6c134eda519f4d953b85cd9e.jpg)0px -181px/100% 100%; "></div>
<canvas id="canv" width="1200" height="250"></canvas>
</div>
<script language="javascript">
var mu = document.getElementById('aud');
var btn = document.getElementById('picBtn');
btn.onclick = function(){
mu.paused ? (mu.play(), btn.style.background="url('https://wj.zp68.com/lxx/yunhua/2022/06/27/13.gif')") : (mu.pause(), btn.style.background="url('https://wj.zp68.com/lxx/yunhua/2022/06/27/13.png')");
}
mu.addEventListener("ended", function(){
btn.style.background="url('https://wj.zp68.com/lxx/yunhua/2022/06/27/13.png')";
})
</script>
<script>
(function () {
let Act = new AudioContext();
let audSrc = Act.createMediaElementSource(aud);
let analyser = Act.createAnalyser();
audSrc.connect(analyser);
analyser.connect(Act.destination);
let ctx = canv.getContext('2d');
let width = canv.width;
let height = canv.height;
let ppColor = ctx.createLinearGradient(350,220,350,0);
ppColor.addColorStop(0.6, '#ff0000');
ppColor.addColorStop(0.4, '#FF0000');
ppColor.addColorStop(0, '#ffff89');
let ppNum = 200;
let voiceHeight = new Uint8Array(analyser.frequencyBinCount);
(function draw() {
analyser.getByteFrequencyData(voiceHeight);
let step = Math.round(voiceHeight.length / ppNum);
ctx.clearRect(0, 0, width, height);
for (let j = 0; j < ppNum; j++) {
let audiheighteight = voiceHeight;
ctx.fillStyle = ppColor;
ctx.fillRect(width / 2 + (j * 8), height, 4, -audiheighteight);
ctx.fillRect(width / 2 - (j * 8), height, 4, -audiheighteight);
}
window.requestAnimationFrame(draw);
})();
canv.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
</script>
<style type="text/css">#audio{
position: absolute;top:520px; left:820px;z-index: 250;
bottom: 0;
opacity: 0;
transition: all 2s;
transform:scale(0.7);}
#audio:hover{
opacity: 0;
}
</style>
<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:300px;height:300px;position: absolute;top:60px; left:800px;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">
醉红妆 (DJ伟然版) - 孙艺琪醉红妆 (DJ伟然版) - 孙艺琪
词：崔伟立
曲：崔伟立
（未经许可,不得翻唱或使用）
半个月亮升起在东山岗
清凌凌的小河门前流淌
桥边那是谁家的红姑娘
花一样的脸庞是俏模样
两只鱼儿嬉戏在画中央
火辣辣的爱情心头荡漾
池边采一缕微微荷花香
执子之手伴你在水一方
精心为你画上 红红的妆
今夜你便是我 最美的郎
止不住的思念在心中藏
那动人的情歌听你轻轻唱
精心为你画上 红红的妆
今夜我便是你 最美新娘
对饮百杯泼墨情思千行
在有情岁月里对你慢慢讲
两只鱼儿嬉戏在画中央
火辣辣的爱情心头荡漾
池边采一缕微微荷花香
执子之手伴你在水一方
精心为你画上 红红的妆
今夜你便是我 最美的郎
止不住的思念在心中藏
那动人的情歌听你轻轻唱
精心为你画上 红红的妆
今夜我便是你 最美新娘
对饮百杯泼墨情思千行
在有情岁月里对你慢慢讲
精心为你画上 红红的妆
今夜你便是我 最美的郎
止不住的思念在心中藏
那动人的情歌听你轻轻唱
精心为你画上 红红的妆
今夜我便是你 最美新娘
对饮百杯泼墨情思千行
在有情岁月里对你慢慢讲
在有情岁月里对你慢慢讲
</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_170:}
用这个播放器有频谱的小风早就做出来了 继续修改把这个播放器去了{:4_204:} 这几个帖子风格都很接近呢。{:4_204:} 小辣椒 发表于 2022-12-4 22:16
首先你这个播放器在就不漂亮了
用这个播放器有频谱的小风早就做出来了
娱乐一下，不求最好！ 亚伦影音工作室 发表于 2022-12-4 22:27
娱乐一下，不求最好！
继续修改不要这个播放器，相信你一定可以的 原来没有同步歌词，是自己加上的，按钮可没有！ 加一个你以前那种转盘的按钮试试，我手机欣赏是要手动播放，这个按钮不太好找。 小辣椒 发表于 2022-12-4 22:26
继续修改把这个播放器去了
把按钮换了！ 亚伦影音工作室 发表于 2022-12-5 15:16
把按钮换了！
这个按钮我手机看不见，可能你设置太边了一点，这个频谱电脑一下子就出来了，还有一个频谱出来好慢 亚伦影音工作室 发表于 2022-12-4 22:27
娱乐一下，不求最好！
这个按钮还得修改，手机根本看不见，没有音乐没有频谱{:4_203:} 亚伦影音工作室 发表于 2022-12-5 15:16
把按钮换了！
呵呵，刚才有朋友来说，你按钮其实已经换了，只是没有发这里，小辣椒还一直在为你测试{:4_203:} 这个帖子有问题 。。。有2个声音。。。。
页:
[1]