master

分支 (2)

管理

管理

master

MusicPlayer_angular

MusicPlayer
/
index.html

<!Doctype html>
<html manifest="app.manifest">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="shortcut icon" href="images/favicon.ico" />
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <title>Music Player</title>
    <!-- inject:css -->
    <link rel="stylesheet" href="css/style.css">
    <!-- endinject -->
</head>

<body>
    <div class="modal fade bs-example-modal-sm" id="showtext" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content" style="color: #333">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">
                        <span aria-hidden="true">&times;</span>
                        <span class="sr-only">Close</span>
                    </button>
                    <h4 class="modal-title"></h4>
                </div>
                <div class="modal-body">
                    <p class="textdiv"></p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal" id="notsurebtn">关闭</button>
                    <button type="button" class="btn btn-primary" id="ensurebtn">确定</button>
                </div>
            </div>
        </div>
    </div>

    <div class="container">
        <hr>
        <div class="row">
            <div class="col-md-8 leftside">
                <div id="searcharea" class="row">
                    <div class="col-xs-7 col-md-9">
                        <input id="addr" type="text" class="form-control" placeholder="输入 歌曲名/歌手/百度音乐id链接">
                    </div>
                    <div class="col-xs-5 col-md-3">
                        <div class="btn-group">
                            <button type="button" class="btn btn-default mayplay" data-loading-text="加载...">搜索</button>
                            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                                <span class="caret"></span>
                                <span class="sr-only">Toggle Dropdown</span>
                            </button>
                            <ul class="dropdown-menu" role="menu" style="min-width: 50px">
                                <li><a href="javascript: void(0);" class="mayplay">播放</a>
                                </li>
                            </ul>
                        </div>


                        <!--<button id="addandplay" class="btn btn-default btn-block" data-loading-text="加载...">播放</button>-->
                    </div>

                    <div id='playarea' style="display:none">
                        <audio id="audio2222"></audio>
                    </div>
                </div>
                <hr>
                <div class="row" id="alllist">
                    <ul id="alllistul">
                        <!--<li>-->
                        <!--<hr>-->
                        <!--<div class="row">-->
                        <!--<div class="col-md-8 col-xs-7 text-nowrap" title="HEBE-你就不要想起我HEBE-你就不要想起我HEBE-你就不要想起我">-->
                        <!--HEBE-你就不要想起我HEBE-你就不要想起我HEBE-你就不要想起我HEBE-你就不要想起我-->
                        <!--</div>-->
                        <!--<div class="col-md-2 col-xs-3 text-right">-->
                        <!--3:44-->
                        <!--</div>-->

                        <!--<div class="col-md-1 col-xs-1">-->
                        <!--<img src="images/delete.png" alt="删除"/>-->
                        <!--</div>-->
                        <!--</div>-->
                        <!--</li>-->
                        <!--<li>-->
                        <!--<hr>-->
                        <!--<div class="row">-->
                        <!--<div class="col-xs-8">-->
                        <!--HEBE-你就不要想起我-->
                        <!--</div>-->
                        <!--<div class="col-xs-1">-->
                        <!--</div>-->
                        <!--<div class="col-xs-3">-->
                        <!--3:44-->
                        <!--</div>-->
                        <!--</div>-->
                        <!--</li>-->
                    </ul>
                </div>
                <!--<hr>-->
                <div id="player">
                    <div class="row">
                        <div class="progressbar">
                            <div class="col-xs-9 col-md-10">
                                <div class="slider img-rounded" id="progressbar">
                                    <div class="loaded" id='loadedprogress'></div>
                                    <div class="pace" id="currentprogress"></div>
                                </div>
                            </div>
                            <div class="col-xs-3 col-md-2">
                                <div class="timer" id='info'>0:00</div>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-xs-4 col-md-3">
                            <h3 id='title' class="text-nowrap">SHANG</h3>
                            <h5 id="artist" class="text-nowrap">SHANG</h5>
                        </div>
                        <div class="col-xs-8 col-md-5">
                            <div class="control">
                                <img id="previewsong" src="./images/rewind.png" alt="">
                                <img id="playpaush" src="./images/pause.png" alt="">
                                <img id="nextsong" src="./images/fastforward.png" alt="">
                                <img id="single" src="images/single.png" alt="" class="pull-right">
                                <img id="download" src="./images/download.png" alt="" class="pull-right">
                            </div>
                        </div>
                        <div class="col-md-4 hidden-xs hidden-sm volume">
                            <div class="row">
                                <div class="col-xs-1">
                                    <img id="mute" src="./images/volume.png" alt="">
                                </div>
                                <div class="col-xs-10">
                                    <div class="slider img-rounded" id="volumebar">
                                        <div class="pace" id="currentvolumebar"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-1"></div>
            <div class="col-md-3" id="lyric">
                <div class="cover">
                    <img id='coverimg' src='images/shang.png' class="img-rounded center-block">
                </div>
                <div class="text-center center-block" id="lrcrepair">
                    <div class="lrctime pull-left" id="lrctimereduce">-</div>
                    <div class="lrctime" id="lrctimecurrent"></div>
                    <div class="lrctime pull-right" id="lrctimeadd">+</div>
                </div>
                <hr>
                <div style="text-align:center" id="lrcdiv">
                    <!--<p lang="1">1</p>-->
                    <!--<p lang="2">2</p>-->
                    <!--<p lang="3">3</p>-->
                    <!--<p lang="4" class="current">4</p>-->
                    <!--<p lang="5">5</p>-->
                    <!--<p lang="6">6</p>-->
                    <!--<p lang="7">7</p>-->
                    <!--<p lang="8">8</p>-->
                    <!--<p lang="9">9</p>-->
                    <!--<p lang="10">10</p>-->
                </div>
            </div>
        </div>
    </div>
    <script src="js/jquery-1.11.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <!-- inject:js -->
    <script src="js/audio.js"></script>
    <script src="js/getbdmusicurl.js"></script>
    <script src="js/ajax.js"></script>
    <script src="js/shang_lrc.js"></script>
    <!-- endinject -->
</body>

</html>