h5音乐播放器实现

前端小迷糊

已于 2022-10-13 19:30:01 修改

阅读量2.2k

点赞数 3

文章标签： html5 javascript css ajax jquery

于 2022-10-13 16:26:14 首次发布

本文链接：https://blog.csdn.net/qq_46311572/article/details/127302752

版权

本文为大家分享一个简易音乐播放器的实现，页面设置参考网易播放器设计，主要使用js+jquery实现前端开发与布局，使用Ajax进行异步请求后端数据。文中展示了详细的代码，供大家参考。项目已发布：xinghuan1998/music-player (github.com)

Html代码

<body>

    <div class="volume-control-panel"> <!--font awesome图标库  音量键-->
        <i class="fa fa-volume-up fa-lg"></i>
        <div id="volume-bar" class="volume-bar">
            <div id="volume-control" class="pro-control" style="bottom:0"></div>
        </div>
    </div>


    <div class="music-detail"><!--font awesome图标库  播放详情页-->
        <div class="heder-detail">

            <div class="dcol" id="back" style="height:60px;width:50px;line-height: 60px;text-align: center;"><i
                    class="fa fa-chevron-down fa-lg"></i></div>
            <div class="dcol" style="margin: auto;height: 60px;position: absolute;left:50%;transform: translate(-50%);">
                <div class="det-title title" style="line-height: 35px;"></div>
                <div class="retbutton actor" style="line-height: 25px; text-align: center;"></div>
            </div>
        </div>
        <div class="mid-detail" style="text-align:center;">
            <div id="shownimg">
                <img class="cover spinner" style="width:100%;height:100%;"
                    src="https://c-ssl.duitang.com/uploads/item/202005/15/20200515000325_hqpkb.jpg" alt="" \>
            </div>


            <div class="excircle"></div>
        </div>
        <div class="bottom-detail">
            <div class="pla1" style="text-align:center;">
                <span><i class="fa fa-heart-o fa-lg"></i></span>
                <span>2</span>
                <span>3</span>
                <span>4</span>
            </div>
            <div class="progress">
                <div class="pro-bar" id="pro-bar">
                    <div class="pro-control" id="pro-control"></div>
                </div>

            </div>
            <div class="control">
                <div><i class&