html5黑色迷人音乐播放器player

来源:https://www.sucaihuo.com/js/446.html 2015-08-25 15:22浏览(1343) 收藏

分享一款酷炫的音频播放器,你可以控制音量,歌曲切换、播放进度、暂停播放等基本功能,支持手机移动设备播放哦。
html5黑色迷人音乐播放器player
分类:其它特效 > 视频播放 难易:中级
查看演示 下载资源 下载积分: 20 积分

引入音乐播放器相关插件

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="js/jquery-ui-1.8.21.custom.min.js"></script> <script type="text/javascript" src="js/main.js"></script>

音频播放器控制按钮代码

<div class="player">
    <div class="pl"></div>
    <div class="title"></div>
    <div class="artist"></div>
    <div class="cover"></div>
    <div class="controls">
        <div class="play"></div>
        <div class="pause"></div>
        <div class="rew"></div>
        <div class="fwd"></div>
    </div>
    <div class="volume"></div>
    <div class="tracker"></div>
</div>

歌曲列表

<ul class="playlist hidden">
    <li audiourl="images/6039.mp3" cover="images/1.jpg" artist="Maroon 5">Sugar.mp3</li>
    <li audiourl="images/6039.mp3" cover="images/2.jpg" artist="平安">洋葱.mp3</li>
    <li audiourl="images/6039.mp3" cover="images/2.jpg" artist="周杰伦">你听得到.mp3</li>
</ul>
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2