本站源码全部测试通过,配有前台及后台演示图,绿色安全,希望能对大家有所帮助!
  • 首 页
  • VPS/云主机
  • VIP会员
  • html5仿qq音乐播放器+歌词同步功能特效
    时间:2019-12-03 14:01 来源:开源之家 作者:开源之家测试提供 下载:161 次
    • 源码说明:本站源码全部经过测试,配有前台及后台管理界面演示图,去除后门,绿色安全,希望对大家学习研究能有所帮助!
    • 源码类型:特效源码
    • 源码大小:3.8 MB
    • 运行环境:HTML
    • 下载次数:161 次
    • 推荐VPS:
    • 提取密码/源码编号:
    • 本地下载
    • 本地下载
    • 》网盘下载,每日更新

    html5仿qq音乐播放器+歌词同步功能特效

    特效描述:html5 仿qq音乐 播放器 歌词同步功能,html5+css3+qq音乐播放器+歌词同步功能(less样式)实用的mp3手机音乐播放器代码

    代码结构

    1. 引入CSS

    1
    2
    <link rel="stylesheet/less" href="less/less.less" />
    <link rel="stylesheet" href="css/layout.css" />

    2. 引入JS

    1
    2
    3
    <script src="./js/less.min.js"></script>
    <script src="./js/jquery.js"></script>
    <script src="./js/song.js"></script>

    3. HTML代码

    <div id="qqMain">
        <!--音乐-->
        <audio src="333.mp3" id="my_audio"></audio>
        <!--cd播放机-->
        <div class="img">
            <img src="img/timg.jpg"/>
            <span class="centerCircle"></span>
        </div>
        <!--音频名字-->
        <div class="musicName">
            <!--<span>慌しく年</span>-->
            <span>匆匆那年</span>
            <!--<span>Kiroro-好きな人</span>-->
        </div>
        <!--歌词-->
        <div id="musicContent">
            <span class="musicContent01"></span>
            <span class="musicContent02"></span>
            <span class="musicContent03"></span>
        </div>
        <div class="time">
            <!--当前时间-->
            <span class="now_time" id="now_time">00:00</span>
            <!--总的时间-->
            <span class="all_time" id="all_time">00:00</span>
        </div>
        <!--时间轴-->
        <div class="time_progress">
            <div class="progress">
                <p class="bar" id="bar"></p>
                <div class="btn" id="btn"></div>
            </div>
        </div>
        <!--暂停或播放-->
        <div class="btnpic" item="0"></div>
    </div>

    html5仿qq音乐播放器+歌词同步功能特效

    郑重声明:
    本站资源均由高价购买、会员分享,全部经过测试,配有前台及后台管理界面演示图,去除后门,绿色安全,希望对大家学习研究能有所帮助!
    若您需要商业运营或用于其它商业活动,请您购买正版授权并合法使用。 我们不承担任何技术及版权问题,且不对任何资源负法律责任。
    如无法下载,联系站长索要。如有侵犯您的版权,请提交软件证书/图片地址和源码链接 我们尽快处理。

    开源之家广告栏目A
    开源之家广告栏目B
    开源之家广告栏目C
    在线客服
    客服微信

    扫一扫......加客服微信