实现音乐播放器的代码(html5+css3+jquery)


Posted in Javascript onAugust 04, 2015

看下面的效果图很不错吧,是怎么实现的呢?下面小编给大家分享下我的一番宝物,Lisa唱的 在angel beats的插曲。用到html5、css、jquery实现此音乐播放器。

一番宝物,Lisa唱的   在angel beats的插曲

实现音乐播放器的代码(html5+css3+jquery)

最后在简述这个东西怎么写之前,本人男,24岁,籍贯上海,诚招女友一枚,要求:性格温顺。。。(省略500字)

<div class="Music">
 <div class="MusicPlaySound"> 
 <img class="MusicPlayBg" src="image/music/zsy.png" /> 
 <img class="MusicPlayProcess rotate" src="image/music/yyjd.png" />
 <div class="MusicPlayBox">
  <h3 class="title">一番の宝物</h3>
  <p class="name">Lisa(Yui final ver)</p>
  <div class="MusicPic"> <img class="MusicPicName PicNameRotate" src="image/music/yifan.jpg" /> <img class="MusicPicButton" src="image/music/pause.png" /> </div>
  <div class="Share icon">分享</div>
  <div class="Next icon">切歌</div>
 </div>
 </div>
 <audio src="music/Yuiki.mp3" autoplay=""></audio>
</div>

html部分就这样略过了。。。。基本都会写。。。

.MusicPlayProcess.rotate{animation:rotate 30s infinite linear;}
.MusicPlayProcess.pause{animation-play-state:paused;
-webkit-animation-play-state:paused;}
.MusicPicName.PicNameRotate{animation:rotate 4s infinite linear;}
.MusicPicName.pause{animation-play-state:paused;
-webkit-animation-play-state:paused;}
@keyframes rotate{
 from{ transform:rotate(0deg)}
 to{ transform:rotate(360deg)}
}

css部分么主要挑点有趣的

大概么这么几个css3动画。。。。上面那个

.MusicPlayProcess.rotate
{ animation: rotate 30s infinite linear;}

你可以把这个30s改成歌曲时间长度就变成进度条了  O~HOHOHOHO(懒人总有懒办法)

infinite 么无限播放么你也懂得

.MusicPicName.pause{animation-play-state:paused;

-webkit-animation-play-state:paused;}

然后么暂停动画、、、、

兼容性是个硬伤其他没什么

$(function(){
 var play=1;
 $(".MusicPicButton").click(function(){
 if(play==0){
  $(this).attr("src","image/music/pause.png")
  $(".MusicPlayProcess").removeClass("pause")
  $(".MusicPicName").removeClass("pause") 
  $("audio").get(0).play();
  play=1;
 }else{
  $(this).attr("src","image/music/play.png")
  $(".MusicPlayProcess").addClass("pause")
  $(".MusicPicName").addClass("pause") 
  play=0;
  $("audio").get(0).pause();
 }
 })
})

这里是Jq部分

play么确定当前状态1播放0暂停

 $("audio").get(0).play();

$("audio").get(0).pause();

以上就是本文的全部内容,希望大家喜欢。

Javascript 相关文章推荐
js prototype 格式化数字 By shawl.qiu
Apr 02 Javascript
JQuery获取文本框中字符长度的代码
Sep 29 Javascript
防止文件缓存的js代码
Jan 10 Javascript
查找页面中所有类为test的结点的方法
Mar 28 Javascript
Egret引擎开发指南之运行项目
Sep 03 Javascript
JavaScript实现网页截图功能
Oct 16 Javascript
JavaScript保留关键字汇总
Dec 01 Javascript
angularjs表格ng-table使用备忘录
Mar 09 Javascript
JS遍历数组和对象的区别及递归遍历对象、数组、属性的方法详解
Jun 14 Javascript
js中遍历对象的属性和值的方法
Jul 27 Javascript
vue.js之vue-cli脚手架的搭建详解
May 05 Javascript
JavaScript设计模式之构造器模式(生成器模式)定义与用法实例分析
Jul 26 Javascript
基于ajax实现文件上传并显示进度条
Aug 03 #Javascript
函数window.open实现关闭所有的子窗口
Aug 03 #Javascript
百度地图api如何使用
Aug 03 #Javascript
javascript实现输出指定行数正方形图案的方法
Aug 03 #Javascript
如何用js 实现依赖注入的思想,后端框架思想搬到前端来
Aug 03 #Javascript
javascript常见数据验证插件大全
Aug 03 #Javascript
javascript自定义in_array()函数实现方法
Aug 03 #Javascript
You might like
PHP执行zip与rar解压缩方法实现代码
2010/12/05 PHP
php中神奇的fastcgi_finish_request
2011/05/02 PHP
不常用但很实用的PHP预定义变量分析
2019/06/25 PHP
用JS实现一个TreeMenu效果分享
2011/08/28 Javascript
JavaScript 函数参数是传值(byVal)还是传址(byRef) 分享
2013/07/02 Javascript
对table和ul实现js分页示例分享
2014/02/24 Javascript
jQuery学习笔记之 Ajax操作篇(一) - 数据加载
2014/06/23 Javascript
JQuery替换DOM节点的方法
2015/06/11 Javascript
js实现input密码框提示信息的方法(附html5实现方法)
2016/01/14 Javascript
深入理解JS实现快速排序和去重
2016/10/17 Javascript
JS弹性运动实现方法分析
2016/12/15 Javascript
JS字符串按逗号和回车分隔的方法
2017/04/25 Javascript
vue.js实现标签页切换效果
2018/06/07 Javascript
vue项目中实现的微信分享功能示例
2019/01/21 Javascript
Django+Vue实现WebSocket连接的示例代码
2019/05/28 Javascript
Nodejs + Websocket 指定发送及群聊的实现
2020/01/09 NodeJs
JS绘图Flot应用图形绘制异常解决方案
2020/10/16 Javascript
javascript实现简单页面倒计时
2021/03/02 Javascript
[02:19]DOTA2女子战队FOX视频专访:希望更多美眉一起加入
2013/10/15 DOTA
[03:02]安得倚天剑,跨海斩长鲸——中国军团出征DOTA2国际邀请赛
2018/08/14 DOTA
python通过shutil实现快速文件复制的方法
2015/03/14 Python
浅谈Python中数据解析
2015/05/05 Python
浅谈python日志的配置文件路径问题
2018/04/28 Python
解决python打不开文件(文件不存在)的问题
2019/02/18 Python
详解用python写一个抽奖程序
2019/05/10 Python
python离线安装外部依赖包的实现
2020/02/13 Python
Python标准库json模块和pickle模块使用详解
2020/03/10 Python
HTML5是什么 HTML5是什么意思 HTML5简介
2012/10/26 HTML / CSS
英国知名美妆护肤在线商城:Zest Beauty
2018/04/24 全球购物
META-INF文件夹中的MANIFEST.MF的作用
2016/06/21 面试题
2014年教研组工作总结
2014/11/26 职场文书
安全先进个人材料
2014/12/29 职场文书
2015年五四青年节活动总结
2015/02/10 职场文书
违规违纪检讨书范文
2015/05/06 职场文书
社会主义核心价值观主题教育活动总结
2015/05/07 职场文书
浅谈TypeScript 索引签名的理解
2021/10/16 Javascript