music-app 关于 audio #19

ahaow · 2019-05-23T09:10:03Z

music-app 关于 audio

关于audio获取播放源时长

let audio = document.getElememtById("audio");
// load() 方法用于在更改来源或其他设置后对音频/视频元素进行更新。

audio.load();

// 更改后需要重新加载 audio 元素，在 audio 元素加载完成后 （oncanplay），此时才能获取到正确的 duration 值
// 当浏览器可以播放音频/视频时
audio.oncanplay = () => {
	 console.log(audio.duration);
}

js实现播放器与歌词同步

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.lyric_area{/*歌词显示区域*/
			height: 400px; /*歌词区域高度*/
			overflow: hidden; /*隐藏超出部分*/
			margin-top: 15px;
		}
		#lyricdom {/*歌词列表*/
			line-height: 30px;/*行高，这个值要用在歌词滚动距离上*/
			transition-duration: 600ms;/*滚动速度*/
			list-style: none;
		 }
		#lyricdom .lineHigh{/*高亮行*/
			color: red;
		}


	</style>
</head>
<body>
	<!-- 播放器 -->
	<audio id="audio" src="http://m10.music.126.net/20190522143350/fc2178e33d6b4078e91fd1e15620ec82/ymusic/e7c5/84f9/897e/a897fda63f7e9f788eac7abbc0bf8602.mp3" controls preload="auto"></audio>
	<!-- 歌词 -->
	<div class="lyric_area">
		<ul id="lyricdom"></ul>
	</div>
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	<script>
		window.onload = function() {
			var lyric = "" // 歌词
			var audio = document.getElementById("audio");
			var lyricdom = document.getElementById("lyricdom");
			var medisArray = [];

			var lineNo = 0, //当前行
			C_pos = 6, //C位
			offset = -20; //滚动距离（应等于行高）

			// 获取歌词
			axios.get("http://localhost:4000/lyric?id=32507038").then(res => {
				lyric = res.data.lrc.lyric
				console.log(lyricdom);
				var medises = lyric.split("\n");
				medises.forEach(item => {
					var t = item.substring(item.indexOf("[") + 1, item.indexOf("]"));
					 medisArray.push({
                        t: (t.split(":")[0] * 60 + parseFloat(t.split(":")[1])).toFixed(3),
                        c: item.substring(item.indexOf("]") + 1, item.length)
                    });
				})
				for(let i = 0; i < medisArray.length; i++) {
					let li = document.createElement("li");
					console.log(li);
					li.innerHTML = medisArray[i].c;
					lyricdom.appendChild(li);
				}
			})

			axios.get("http://localhost:4000/song/url?id=32507038").then(res => {
				audio.src = res.data.data[0].url;
			}).catch(err => {
				console.log(err)
			})

			//高亮显示歌词当前行及文字滚动控制，行号为lineNo
			function lineHigh() {
				var lis = lyricdom.getElementsByTagName("li");//歌词数组
				if(lineNo>0){
			 		lis[lineNo-1].removeAttribute("class");//去掉上一行的高亮样式
				}
				lis[lineNo].className = "lineHigh";//高亮显示当前行
				//文字滚动
				if(lineNo>C_pos){
					lyricdom.style.transform = "translateY("+(lineNo-C_pos)*offset+"px)"; //整体向上滚动一行高度
				}
			}

			//监听播放器的timeupdate事件，实现文字与音频播放同步
			audio.ontimeupdate = function () {
			    if(lineNo == medisArray.length)
					return;
				var curTime = audio.currentTime; //播放器时间
				if(parseFloat(medisArray[lineNo].t)<=curTime){
					lineHigh();//高亮当前行
					lineNo++;
				}
			};

			//滚回到开头，用于播放结束时
			function goback() {
				document.querySelector("#lyricdom .lineHigh").removeAttribute("class");
				lyricdom.style.transform = "translateY(0)";
				lineNo = 0;
			}

			//监听播放器的ended事件，播放结束时回滚歌词
			audio.onended = function () {
			    goback(); //回滚歌词
			};
		}
	</script>
</body>
</html>

关于自定义播放进度条

currentTime 播放的当前时间
duration 播放的时长

由 currentTime / duration 得出播放进度

结合 music-app 案例：

let progressBar = document.getElementById("progressBar");
let bar = progressBar.children[0]
let progressBtn = progressBar.children[1];
let time = audio.currentTime / audio.duration;
bar.style.width = (time * 100) + "%";
progressBtn.style.left = (time * 100) + "%";

The text was updated successfully, but these errors were encountered:

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

music-app 关于 audio #19

music-app 关于 audio #19

ahaow commented May 23, 2019

music-app 关于 audio #19

music-app 关于 audio #19

Comments

ahaow commented May 23, 2019

music-app 关于 audio

关于audio获取播放源时长

js实现播放器与歌词同步

关于自定义播放进度条