mymusci
/
index.html

<!DOCTYPE html>
<html lang="en">
<!-- todo 进度条拖动效果 -->
<!-- version: 0.6 音频波动效果，最后一句歌词不高亮显示bug -->
<!-- version: 0.5 歌曲列表点击播放，播放特效 -->
<!-- version: 0.4 css自定义input:range（音量控制） -->
<!-- version: 0.3 css自定义进度条 -->
<!-- version: 0.2 css滚动歌词 -->
<!-- version: 0.1 html结构-->

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>mymusic</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <!-- 引入外部css样式表 -->
    <link rel="stylesheet" href="./css/mymusic.css">
    <link rel="stylesheet" href="./css/style.css">
    <!-- 引入JS脚本 -->
    <script src="./js/jquery-3.5.0.js"></script>
    <script src="./js/getAjaxDoc.js"></script>
    <script src="./js/mymusic.js"></script>
</head>

<body>
    <canvas id='canvas' width="800" height="110"></canvas>
    <audio id="audio" >你的浏览器不支持该类型音乐</audio>
    <!-- <audio src="./src/于文文-体面.mp3" controls="controls"></audio> -->
    <div class="blur_bg"></div>
    <table>
        <tr>
            <!-- 歌单列表 -->
            <td rowspan="2" colspan="2" style="width: 50%;">
                <div id="musiclist">
                    <ul>
                        <li class="inline-bloack"><span>CORS</span><span>请使用Hbuilder-X</span><span>内置浏览器</span></li>
                    </ul>
                </div>
            </td>
            <!-- 唱片图片 -->
            <td style="width: 25%;">
                <div style="height: 200px; position: relative;">
                    <img class="disc" src="./img/play.png" width="180px">
                    <img class="pointer" src="./img/pointer.png" width="120px">
                </div>
            </td>
            <!-- 歌曲信息1 -->
            <td style="width: 25%;">
                <div id="musicinfo_one" class="search">
                    <p class="title">说散就散</p>
                    <p>歌手名：<a href="#"><span class="artist">JC</span></a></p>
                    <p>专辑名：<a href="#"><span class="album">群星</span></a></p>
                </div>
            </td>
        </tr>
        <tr>
            <!-- 滚动歌词 -->
            <td colspan="2">
                <div id="lrc" style="height: 230px; text-align: center; overflow-y: scroll;">
                    <ul>
                    </ul>
                </div>
            </td>
        </tr>
        <tr>
            <!-- 进度条 -->
            <td colspan="4" style="text-align: left;" height="20px">
                <div style="width: 100%;" class="progress">
                    <!-- 使用水平方向的渐变色背景 -->
                    <span id="progress_bar" class="inline-block"
                        style="vertical-align:middle; width: 0; height: 4px; background: linear-gradient(to right,#f1d0d3, #ff410f);"></span>
                    <span id="timer" class="inline-block progress-thumb"
                        style="vertical-align:middle;">00:00/00:00</span>
                </div>
            </td>
        </tr>
        <tr>
            <!-- 控制区域 -->
            <td colspan="4">
                <div style="position: relative;height: 100%;">
                    <!-- 歌曲信息2 -->
                    <div class="inline-block" style="position: absolute; left: 0;">
                        <img id="img_play" src="./img/pause.jpg" width="47px" alt="暂时没有找到图片" title="123"
                            style="vertical-align:bottom">
                        <div class="inline-block search" id="musicinfo_two" style="text-align: left;">
                            <a href="#">
                                <p class="title">说散就散</p>
                            </a>
                            <a href="#">
                                <p class="artist">JC</p>
                            </a>
                        </div>
                    </div>
                    <!-- 控制按钮 -->
                    <div class="inline-block play">
                        <a href="javascript:lastMusic()" id="btn_prev" title="上一首" class="iconfont btn">&#xe603;</a>
                        <a href="javascript:playMusic()" id="btn_play" title="播放/暂停" class="iconfont btn">&#xe64a;</a>
                        <a href="javascript:nextMusic()" id="btn_next" title="下一首" class="iconfont btn">&#xe602;</a>
                    </div>
                    <!-- 播放模式、音量控制 -->
                    <div class="inline-block" style="position: absolute; right: 0px;">
                        <a href="javascript:soundoff()" id="btn_volme" title="关闭声音" class="iconfont btn">&#xe662;</a>
                        <input type="range" id="volume" title="调整音量" onchange="adjustVolume()">
                        <a href=" javascript:changeStyle()" id="btn_playstyle" title="列表循环"
                            class="iconfont btn inline-block" style="width: 50px;">&#xe605;</a>
                    </div>
                </div>
            </td>
        </tr>
    </table>
</body>
<script src="js/script.js"></script>

</html>