html，js编写的简易音乐播放器
使用html中的div标签进行简单的布局，使用js实现音乐播放功能。
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ".dtd">
<html xmlns=""><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="Keywords" content="关键字"><meta name="Description" content="描述信息"><title>音乐播放系统</title>
</head>
<!--css层叠样式表
-->
<style>* {margin: 0;padding: 0;}/*解决浏览器兼容问题margin :上下 左右*//*背景图片*/body {background: url("images/bg.jpg");background-size: cover;}.music {width: 720px;height: 470px;background: #a0a0a0;margin: 100px auto;}.music .m_lrc {width: 50%;height: 100%;background: #66ccff;float: left;}.music .m_lrc h2 {height: 60px;background: #ccc;text-align: center;line-height: 60px;font-size: 20px;}.music .m_lrc .m_con {height: 410px;background: url("images/2.png")}.music .m_list {width: 50%;height: 100%;background: #262c35;float: right;overflow-y: auto;}.music .m_list ul li {list-style: none;color: #fff;line-height: 36px;padding-left: 18px;border-bottom: 1px solid #7d7d7d;}.music .m_list ul li:hover {cursor: pointer;background: -webkit-linear-gradient(-45deg, #dddcce, #a9cbc9, #d69f83);color: #000;transition: 0.3s;}
</style><body><!--创建音乐窗口创建歌词部分 和歌曲列表部分点击列表能够播放音乐实现歌词联动 和 歌词滚动解析歌词获取歌曲--><!--以class自定义名称的样式称为类样式--><div class="music"><!--歌词--><div class="m_lrc"><h2>Music</h2><div class="m_con"></div></div><!--歌曲列表--><div class="m_list"><ul><li onclick="play(1)">唯你一生-水木年华</li><li onclick="play(2)">问天问地-王伟</li><li onclick="play(3)">因为我们是兄弟</li><li onclick="play(4)">年轻的战场</li><li onclick="play(5)">爱如星火</li><li onclick="play(6)">花桥流水</li><li onclick="play(7)">我和草原有个约定</li><li onclick="play(8)">梦醉荷塘</li><li onclick="play(9)">红颜先生</li></ul></div></div><!--end music--><script src="js/jquery-1.11.1.min.js"></script><script>//创建音乐播放器var audioDom = ateElement("audio");//点击播放音乐function play(name) {//设置音乐播放地址audioDom.src = "mp3/" + name + ".mp3";//自动播放audioDom.autoplay = "autoplay";}</script></body></html>项目源代码及文件已经上传，下载地址：
本文发布于:2024-02-02 12:40:09，感谢您对本站的认可！
本文链接：https://www.4u4v.net/it/170684880843862.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
| 留言与评论（共有 0 条评论） |
