全部代码：

index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<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 = document.createElement("audio");
        //点击播放音乐
        function play(name) {
            //设置音乐播放地址
            audioDom.src = "mp3/" + name + ".mp3";
            //自动播放
            audioDom.autoplay = "autoplay";

        }
    </script>


</body>

</html>
项目源代码及文件已经上传，下载地址：https://download.csdn.net/download/qq_41251963/10633298
简易音乐播放系统

全部代码：

猜你喜欢
