原生JS音乐歌词播放页面

最新推荐文章于 2023-07-27 22:58:05 发布

Y_qilin_

最新推荐文章于 2023-07-27 22:58:05 发布

阅读量688

点赞数 1

文章标签： html5 javascript css3 css html

本文链接：https://blog.csdn.net/Y_qilin_/article/details/107995654

版权

本文介绍如何创建一个原生JS音乐歌词播放页面，包括HTML页面结构的搭建，CSS样式的设计以及JS处理歌词滚动的行为。音乐通过audio标签播放，歌词存储于div>ul>li元素中，利用JS动态生成并控制歌词滚动展示。

摘要由CSDN通过智能技术生成

本实验使用音乐文件为周华健演唱的歌曲《难念的经》请自行下载音乐文件

html页面结构

整个页面的结构分为音乐播放部分和歌词滚动部分。两部分放在一个div标签下。音乐文件采用audio标签引入放在页面顶端，歌词文本放入div>ul>li嵌套标签

<!DOCTYPE html>
<html>
<head>
	<title>原生JS音乐歌词滚动</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<div class="container">
		<audio id="ad" src="media/1.mp3" controls loop></audio>
		<div class="lrc">
			<ul id="ullrc"></ul>
		</div>
	</div>
	<script type="text/javascript" src="index.js"