实现音乐播放器的代码(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 相关文章推荐
用htc组件制作windows选项卡
Jan 13 Javascript
js cookies 常见网页木马挂马代码 24小时只加载一次
Apr 13 Javascript
javascript改变position值实现菜单滚动至顶部后固定
Jan 18 Javascript
JavaScript的jQuery库插件的简要开发指南
Aug 12 Javascript
13个PHP函数超实用
Oct 21 Javascript
学习JavaScript设计模式之迭代器模式
Jan 19 Javascript
Angularjs中的事件广播 —全面解析$broadcast,$emit,$on
May 17 Javascript
JS函数arguments数组获得实际传参数个数的实现方法
May 28 Javascript
AngularJS的ng-repeat指令与scope继承关系实例详解
Jan 21 Javascript
微信小程序 获取session_key和openid的实例
Aug 17 Javascript
vue实现一拉到底的滑动验证
Jul 25 Javascript
vue+element ui实现锚点定位
Jun 29 Vue.js
基于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程序?
2006/12/08 PHP
PHP 面向对象 final类与final方法
2010/05/05 PHP
javascript,jquery闭包概念分析
2010/06/19 Javascript
JQuery 绑定select标签的onchange事件,弹出选择的值,并实现跳转、传参
2011/01/06 Javascript
js中substring和substr的详细介绍与用法
2013/08/29 Javascript
文本框(input)获取焦点(onfocus)时样式改变的示例代码
2014/01/10 Javascript
为JS扩展Array.prototype.indexOf引发的问题及解决办法
2015/01/21 Javascript
初识Node.js
2015/03/20 Javascript
jquery实现隐藏在左侧的弹性弹出菜单效果
2015/09/18 Javascript
EXT中单击button按钮grid添加一行(光标位置可设置)的实例代码
2016/06/02 Javascript
JavaScript 中对象的深拷贝
2016/12/04 Javascript
jQuery动态添加元素无法触发绑定事件的解决方法分析
2018/01/02 jQuery
vue中axios解决跨域问题和拦截器的使用方法
2018/03/07 Javascript
layui table 参数设置方法
2018/08/14 Javascript
小程序云开发如何实现图片上传及发表文字
2019/05/17 Javascript
jquery获取input输入框中的值
2019/11/13 jQuery
JS函数进阶之继承用法实例分析
2020/01/15 Javascript
详解Vue3 Teleport 的实践及原理
2020/12/02 Vue.js
python实现保存网页到本地示例
2014/03/16 Python
Python实现模拟时钟代码推荐
2015/11/08 Python
Python编程之列表操作实例详解【创建、使用、更新、删除】
2017/07/22 Python
python实现简单聊天应用 python群聊和点对点均实现
2017/09/14 Python
python3安装crypto出错及解决方法
2019/07/30 Python
Python GUI学习之登录系统界面篇
2019/08/21 Python
Python三元运算与lambda表达式实例解析
2019/11/30 Python
使用Python通过oBIX协议访问Niagara数据的示例
2020/12/04 Python
python 基于pygame实现俄罗斯方块
2021/03/02 Python
基于html5绘制圆形多角图案
2016/04/21 HTML / CSS
Hoover胡佛官网:美国吸尘器和洗地机品牌
2019/01/09 全球购物
俄罗斯电动工具和设备购物网站:Vseinstrumenti.ru
2020/11/12 全球购物
市场营销专业毕业生自荐信
2013/11/02 职场文书
《与朱元思书》的教学反思
2014/04/17 职场文书
创先争优公开承诺书
2014/08/30 职场文书
2015年语言文字工作总结
2015/07/23 职场文书
毕业生自我鉴定范文
2019/05/13 职场文书
浅谈golang 中time.After释放的问题
2021/05/05 Golang