普通注册 - 普通登录
开源之家-免费素材_软件_模板_源码下载-更快的站长下载站

开源之家-免费素材_软件_模板_源码下载-更快的站长下载站

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

时间:2019-12-03 14:01 [特效源码] 作者:开源之家测试提供 浏览: 已下载:166次

点击下载 已下载:166 次  运行环境:HTML  软件大小: 3.8 MB  提取码:   推荐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>


点击下载 已下载:166 次  运行环境:HTML  软件大小: 3.8 MB  提取码:   推荐VPS:九零云

转载请注明来源:html5仿qq音乐播放器+歌词同步功能特效

本文永久链接地址:https://www.enboo.cn/texiaoyuanma/17548.html


下载说明:
●推荐使用2345加速浏览器、谷歌等各大浏览器直接点击下载地址下载,请勿复制本站下载地址到别处下载,推荐使用2345好压解压文件;
●本站提供的源码通过 QQ电脑管家、360安全卫士 等软件检测;安全绿色无病毒请放心下载!
●本站提供的源码经过测试,有前台及后台管理界面演示图;请自行下载学习研究,请勿用于非法用途,如用于非法用途,责任请自负,与本站无关!
版权声明:
○下载本站资源学习研究的默认同意本站的【版权声明本站提供的资源若有侵犯你的权益请:点此维权 站长会进行审查之后,情况属实的会在三个工作日内为您删除。