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

    jQuery音乐播放器jAudio.js插件

    特效描述:jQuery 音乐播放器 jAudio.js插件,jQuery音乐播放器jAudio.js插件

    代码结构

    1. 引入CSS

    1
    <link rel="stylesheet" type="text/css" href="css/main.css">

    2. 引入JS

    1
    2
    <script src='js/jquery-2.1.4.min.js'></script>
    <script src='js/jaudio.js'></script>

    3. HTML代码

    <div class='jAudio--player'>
    <audio></audio>
    <div class='jAudio--ui'>
      <div class='jAudio--thumb'></div>
      <div class='jAudio--status-bar'>
        <div class='jAudio--details'></div>
        <div class='jAudio--volume-bar'></div>
        <div class='jAudio--progress-bar'>
          <div class='jAudio--progress-bar-wrapper'>
            <div class='jAudio--progress-bar-played'>
              <span class='jAudio--progress-bar-pointer'></span>
            </div>
          </div>
        </div>
        <div class='jAudio--time'>
          <span class='jAudio--time-elapsed'>00:00</span>
          <span class='jAudio--time-total'>00:00</span>
        </div>
      </div>
    </div>
    <div class='jAudio--playlist'>
    </div>
    <div class='jAudio--controls'>
      <ul>
        <li><button class='btn' data-action='prev' id='btn-prev'><span></span></button></li>
        <li><button class='btn' data-action='play' id='btn-play'><span></span></button></li>
        <li><button class='btn' data-action='next' id='btn-next'><span></span></button></li>
      </ul>
    </div>
    </div>
    <script>
    var t = {
        playlist:[
            {
              file: "tracks/01.mp3",
              thumb: "thumbs/01.jpg",
              trackName: "Dusk",
              trackArtist: "Tobu & Syndec",
              trackAlbum: "Single",
            },
            {
              file: "tracks/02.mp3",
              thumb: "thumbs/02.jpg",
              trackName: "Blank",
              trackArtist: "Disfigure",
              trackAlbum: "Single",
            },
            {
              file: "tracks/03.mp3",
              thumb: "thumbs/03.jpg",
              trackName: "Fade",
              trackArtist: "Alan Walker",
              trackAlbum: "Single",
            }
        ],
        autoPlay:true
    }
    $(".jAudio--player").jAudio(t);
    </script>

    jQuery音乐播放器jAudio.js插件

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

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

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