(html)音乐之原生js简单的歌词滚动hah

歌词滚动

话不多说先上效果图和效果链接
效果链接点击查看
链接如果没反应,应该是在缓存音乐,稍等片刻就ok了,当然记得点下播放按钮(°ー°〃)
在这里插入图片描述

  • 前段时间写了个音乐播放器,没想到竟然拿了100个赞,十分开心
  • 然后要人说要写个歌词滚动,正好这天有空,然后一下午才想出来,(没少百度和翻mdn );很多东西都忘了。
  • 随便发现了自己ajax没学好,所以代码并不整洁
  • 说废话了,上代码了
  • 先看下html,当然我自己的样式没放这里,这里只放必要的
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>music1.2</title>
	<link rel="stylesheet" href="">
	<style type="text/css" media="screen">
		.play{
			background-color: black;
			border-radius: 5%;
			font-size: 20px;
		}
	</style>
</head>
<body>
	<div id="music" style="margin: 0 auto;width: 400px;height: 600px"></div>
	<script src="./index.js"></script>
	<script type="text/javascript">
		let ele =document.getElementById('music');
		musicPlay(ele);
	</scrip>
</body>
</html>

css比较少加没单独写一个文件。大多用js写了。本来想写一个插件。现在可以改到地方还挺多的,有兴趣到小伙伴可以试试改良。也希望改完可以发给我看看,邮箱2827531065@qq.com

然后js有点乱,不过还是能看的

function musicPlay(ele){
 let musicArea = document.createElement('div');
 let music =document.createElement('audio');
 let musicUl =document.createElement('ul');
 let a = 400;//歌词容器到高,随便改,但最好和你自己写到那个div一样高;
 let b = 35;//li的高度,无特殊要求;
 let c ='demo.mp3'//歌曲目录,只能放一个哈!
 ele.appendChild(musicArea).appendChild(music);
                musicArea.appendChild(musicUl);
 musicStyle();
 //我让ajax打败了,所以歌词直接放变量了。(╯﹏╰)恶补中;
 //烦人的报错,让我把ajax先扔去喂鱼,等下再吃。
 let lrc = `[00:00.00] 作曲 : 薄荷映像
[00:00.27] 作词 : 薄荷映像
[00:00.81]早安喵 午安喵 晚安喵 喵 喵
[00:05.82]早安喵 午安喵 晚安喵 喵 喵
[00:20.94]喜欢你的微笑和调皮的嘴角
[00:26.14]那午后的阳光穿过你的发梢
[00:30.98]想让全世界停在这一秒
[00:36.43]陪着你把世界都忘掉
[00:41.49]早安喵 午安喵 晚安喵 喵 喵
[00:46.30]早安喵 午安喵 晚安喵 喵 喵
[01:11.25]喜欢你的微笑和调皮的嘴角
[01:16.19]喜欢你的拥抱和黄色外套
[01:21.06]这甜蜜的感觉只有我知道
[01:27.14]就是喜欢你的味道
[01:31.99]早安喵 午安喵 晚安喵 喵 喵
[01:36.79]早安喵 午安喵 晚安喵 喵 喵
[01:45.94]嘿咻嘿咻~
`
 function musicStyle(){//控件css样式;	
 	music.autoplay =true;
 	music.src =c;	
 	music.controls =true;
 	music.loop =true;
 	music.style.outline ='none'; 
 	music.style.width ='100%';
 	musicArea.style.width ='100%';
 	musicArea.style.height ='100%';
 	musicArea.style.overflow = 'hidden'
 	// musicArea.style.outline ='3px solid'
 	musicUl.style.listStyle ='none'; 
 	musicUl.style.width ='100%'
 	musicUl.style.padding  ='0';
 	musicUl.style.transition = '0.3'
 }
 //把歌词变成[{time,lrc},{time,lrc}...]的样子,不然没法用的
 function split(){//把lrc歌词分割成数组,
    let split_1 =lrc.split('\n');
	let length = split_1.length;
	for (let i = 0; i < length; i++) {
		let lrcArr = split_1[i];
		split_1[i] = change(lrcArr);
	function change(str){
		let lrc = str.split(']');
		let timer =lrc[0].replace('[','');
		let str_music =lrc[1];
		let time_split =timer.split(':');
		let s = +time_split[1];
		let min = +time_split[0];
		return{
			time:min*60 + s ,
			lrc :str_music//分割好到歌词和时间
		}
        
	}
}
return split_1
}
let lrcArr = split();//至此歌词处理完了。
createLi();
function createLi(){//根据歌词数组创建li
	let len = lrcArr.length;
	for (let i = 0; i < len; i++) {
		  let lrc_li  = lrcArr[i];
		  let li  = document.createElement('li');
		  li.innerText =lrc_li.lrc;
		  li.style.height = b + 'px'
		  li.style.textAlign ='center'
		  li.style.width='100%'
		  li.style.padding = '0';
		  li.style.color = '#999'
		  li.style.transition = '0.3'
		  musicUl.appendChild(li);
	}
}
function setCurrentLi(){
	let time = music.currentTime;
	// console.log(time)
	for ( i = 0; i < lrcArr.length; i++) {
		let play = lrcArr[i];
		if (time -play.time <= 0) {
			 return i;
		}
	}return -1;
}
function current(){//设置top,让其滚动
	let li = setCurrentLi();
	let divHeight = a;
	let liHeight =b;
	let top  = liHeight*li - divHeight / 2 +liHeight / 2;
	if (top < 0) {
		top = 0;
	}
	musicUl.style.marginTop = -top + 'px';
	// console.log('top'+top);
	let playLi =musicUl.querySelector('.play')
	if (playLi) {
		playLi.className = '';		
	}
	if(li>=0){
		musicUl.children[li-1].className ='play'
    
}}
music.ontimeupdate = current;
}
  • 这里说一下大概思路,先把lrc歌词变成能用到数组,
  • 像这样到[{time,str},{time,str},{time,str}…]
  • 其中time为时间,str为歌词。
  • 然后用设置margin-top让其滚动。
  • 不说了我要去恶补ajax了。
    最后欢迎指出不足的地方
    还有大家最近还是少出门,注意别生病了。
    提前祝新年快乐!
已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 岁月 设计师:pinMode 返回首页