频谱 - 欢乐水吧 - 花潮论坛 - Powered by Discuz! Archiver

亚伦影音工作室 发表于 2024-5-28 13:20

频谱

本帖最后由亚伦影音工作室于 2025-5-28 06:48 编辑 <br /><br /><style> #papa { margin:0px 0 20px calc(50% - 680px); width: 1164px; height: 640px; background:#880000 url(https://pic.imgdb.cn/item/65db15629f345e8d03a78591.jpg)no-repeat center/cover;box-shadow: 3px 3px 6px gray; position: relative; overflow: hidden;}

#pinpu1 { position: absolute; width: 100%; height: 350px; z-index: 9; top:45%;left:0%;z-index: 4;mix-blend-mode: lighten;}
#pinpu1 img{ width: 100%;height: 350px;}
#bfqbj{margin: 40% 62%;width: 320px;height: 200px;position: absolute;background:url(https://pic.imgdb.cn/item/66457360d9c307b7e9ffe724.png)no-repeat 0px 10px/320px 50px;z-index: 5;transform: scale(0.7);}
#prog {position: absolute;z-index: 6;
   width: 300px;
   height: 3px;
   cursor: pointer;
      top:10px;
left:0px;background:#F1612A linear-gradient(to right,#F1612A, #F1612Avar(--prg), white 0);
   color: #ffffff;
   --prg: 0%; --state: paused;}
#prog::before, #prog::after { position: absolute; }
#prog::before { content: attr(data-cu); left:10px; top: -24px; }
#prog::after { right: 10px; content: attr(data-du); ; top: -24px; }

#mplayer {z-index: 80;position:absolute;top:16px;left:140px;width:30px;height:30px;cursor: pointer;filter:hue-rotate(60deg)contrast(180%)brightness(300%);}
#lb{ position: absolute;top: 22px;right:35px; width: 20px; height: 18px; }
#lb img{ width: 100%; height: 100%; opacity: 1; }
@keyframes rot { to { transform: rotate(1turn); } }
.lrc{position: absolute;z-index: 90;transform:rotate(0deg);
width: 960px;
height: 100px;/*歌词轮廓高：160：显示一行两行三行。500：多行*/
   overflow: hidden;
display: block;
margin: 360px 410px;/*歌词调整：上下左右*/
}
.lrc #ullrc{
width: 100%;
padding: 0;
list-style: none;
transition: 0.3s all ease;
margin: 0;
}
/*歌词普通样式*/
.lrc #ullrc li{
height: 50px;
line-height: 50px;
font-family:悟空大字库;
font-size: 30px;/*歌词字体大小：0不显示普通歌词，只有一行动态歌词*/
color: #00fff0;transform: translate(0%,0%);
font-weight: normal;
transition: .3s all ease;/*一定要加上不然看着突兀*/
list-style-type: none;
text-align:center;/*歌词显示对齐方式：left center right，默认居中（center）对齐*/
display: block;
width: 100%;
margin: 0 auto;
}

/*动态歌词样式*/
.lrc #ullrc li.active{
font-size: 35px;color: #F1612A;
}
text-align:center;
transform: translate(0%,0%);
font-weight: normal;

</style>
<div id="papa">

<audio id="aud" src="https://s2.ananas.chaoxing.com/sv-w9/audio/10/6a/8d/461c840daf5e5738e3302cd95f67c9f2/audio.mp3" autoplay loop></audio>
<div id="pinpu1"> <img id="pinpu1Img" src="https://cccimg.com/view.php/7dedb9e000fd4291a27e6557f3b41c9a.gif" alt="" /></div>
   <div id="bfqbj">
<div data-cu="00:00" data-du="00:00" id="prog" title="" style="--state: running; --prg: 48.40552205703211%;"></div>
<div ><img id="mplayer" src="https://638183.freep.cn/638183/t23/btn/play2.png" alt="" /></div>
<div id="lb"> <img id="lbImg" src="https://pic.imgdb.cn/item/662615500ea9cb14035d435e.gif" alt="" /></div>
</div>
<div class="lrc">
   <ul id="ullrc">
      </ul>
   </div>

</div>

<script>
aud.onplaying = aud.onpause = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
   /* */
(function() {
var aud = document.getElementById("aud");
var img = document.getElementById("mplayer");
img.onclick = function() {
   if (aud.paused) {
            aud.play();
   } else {
            aud.pause();
   }
}
aud.addEventListener("play", function (e) {
   img.src="https://638183.freep.cn/638183/t23/btn/pause2.png";
}, false);
aud.addEventListener("pause", function (e) {
   img.src="https://638183.freep.cn/638183/t23/btn/play2.png";
}, false);})();

let mState = () => prog.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('pause', mState, false);
aud.addEventListener('play', mState, false);

aud.addEventListener('timeupdate', () => {
   prog.style.setProperty('--prg', aud.currentTime / aud.duration * 100 + '%');
   prog.dataset.cu = toMin(aud.currentTime);
   prog.dataset.du = toMin(aud.duration);
});

prog.onclick = (e) => aud.currentTime = e.offsetX * aud.duration / prog.offsetWidth;
let toMin = (val) => {
            if (!val) return '00:00';
            val = Math.floor(val);
            let min = parseInt(val / 60),
                     sec = parseFloat(val % 60);
            if (min < 10) min = '0' + min;
            if (sec < 10) sec = '0' + sec;
            return min + ':' + sec;
   };
/**/

/**/
if ('getContext' in document.createElement('canvas')) {
HTMLImageElement.prototype.play = function() {
   if (this.storeCanvas) {
         // 洢canvas
         this.storeCanvas.parentElement.removeChild(this.storeCanvas);
         this.storeCanvas = null;
         //
         imagelb.style.opacity = ''; imagepinpu.style.opacity = '';imagedt.style.opacity = '';imagepinpu1.style.opacity = '';
   }
   if (this.storeUrl) {
         this.src = this.storeUrl;
   }
};
HTMLImageElement.prototype.stop = function() {
   var canvas = document.createElement('canvas');
   //
   var width = this.width, height = this.height;
   if (width && height) {
         // 洢
         if (!this.storeUrl) {
            this.storeUrl = this.src;
         }
         // canvasС
         canvas.width = width;
         canvas.height = height;
         //
         canvas.getContext('2d').drawImage(this, 0, 0, width, height);
         //
         try {
            this.src = canvas.toDataURL("image/gif");
         } catch(e) {
            //
            this.removeAttribute('src');
            // canvas
            canvas.style.position = 'absolute';
            //
            this.parentElement.insertBefore(canvas, this);
            //
            this.style.opacity = '0';
            // 洢canvas
            this.storeCanvas = canvas;
         }
   }
};
}

var imagelb= document.getElementById("lbImg");

var imagepinpu1= document.getElementById("pinpu1Img");
mplayer.onclick =function() { aud.paused ?(aud.play(),imagelb.play(),imagepinpu1.play()): (aud.pause(),imagelb.stop(),imagepinpu1.stop())};
</script>
<script >
var lrc = `许丽静 - 你会爱我到什么时候
作词:张超
作曲:张超
忘了是什么时候
习惯了一些问候
听老情歌
最后一首
轻轻的唇在颤抖
时间像无边的海
我们在无力地游
思念在前后
焦心在左右
谁在挥舞着衣袖
你会爱我到什么时候
你会陪我到哪个路口
我不知道用什么理由
让你可以和我厮守到白头
你会爱我到什么时候
你会等我到哪座桥头
我只剩下这一颗红豆
请你把它收下
别让风带走
时间像无边的海
我们在无力地游
思念在前后
焦心在左右
谁在挥舞着衣袖
你会爱我到什么时候
你会陪我到哪个路口
我不知道用什么理由
让你可以和我厮守到白头
你会爱我到什么时候
你会等我到哪座桥头
我只剩下这一颗红豆
请你把它收下
别让风带走
你会爱我到什么时候
你会陪我到哪个路口
我不知道用什么理由
让你可以和我厮守到白头
你会爱我到什么时候
你会等我到哪座桥头
我只剩下这一颗红豆
请你把它收下
别让风带走
请你把它收下
别让风带走
`;
function $(id) {
return document.getElementById(id);
}//这样写以后getid方便

function getLrcArray() {
var parts = lrc.split("\n");
for (let index = 0; index < parts.length; index++) {
   parts = getLrcObj(parts);
}
return parts;

function getLrcObj(content) {
   var twoParts = content.split("]");
   var time = twoParts.substr(1);
   var timeParts = time.split(":");
   var seconds = +timeParts;
   var min = +timeParts;
   seconds = min * 60 + seconds;
   var words = twoParts;
   return{
         seconds: seconds,
         words: words,
   };
}
}

var lrcArray = getLrcArray();

function inputLrc() {
for (let index = 0; index < lrcArray.length; index++) {
   var li = document.createElement("li");
   li.innerText = lrcArray.words;
   $("ullrc").appendChild(li);
}
}

inputLrc();

function setPosition() {
var index = getLrcIndex();
if (index == -1) {
   return;
}
var lrc_li_height = 50, lrc_ul_height = 50;/*动态歌词显示的位置：250：第三行变色增大。160：在第二行变化。50：在第一行变化 */
var top = index * lrc_li_height + lrc_li_height / 2 - lrc_ul_height / 2;
if (top < 0) {
   top = 0;
}
$("ullrc").style.marginTop = -top + "px";
var activeLi = $("ullrc").querySelector(".active");
if(activeLi){
   activeLi.classList.remove("active");
}
$("ullrc").children.classList.add("active");
}

var turn = 0;

function getLrcIndex(){
var time = $("aud").currentTime + turn;
for (var index = 0; index < lrcArray.length; index++) {
   if (lrcArray.seconds > time) {
         return index - 1;
   }
}
}

$("aud").ontimeupdate = setPosition;

</script >

红影发表于 2024-5-28 15:18

三种频谱形式来回替换，这个漂亮{:4_199:}

老谟深虑 发表于 2024-5-28 16:59

老师制作的漂亮，点赞！

页: [1]

花潮论坛's Archiver

频谱