实现音乐播放器的代码(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 相关文章推荐
javascript 有用的脚本函数
May 07 Javascript
js 通用javascript函数库整理
Aug 14 Javascript
jQuery Tools tab(幻灯片)
Jul 14 Javascript
jQuery 如何先创建、再修改、后添加DOM元素
May 20 Javascript
node.js中的dns.getServers方法使用说明
Dec 08 Javascript
基于JavaScript实现鼠标悬浮弹出跟随鼠标移动的带箭头的信息层
Jan 18 Javascript
Function.prototype.apply()与Function.prototype.call()小结
Apr 27 Javascript
浅谈jQuery操作类数组的工具方法
Dec 23 Javascript
vue初尝试--项目结构(推荐)
Jan 30 Javascript
浅谈webpack打包之后的文件过大的解决方法
Mar 07 Javascript
iview同时验证多个表单问题总结
Sep 29 Javascript
使用这 6个Vue加载动画库来减少我们网站的跳出率
May 18 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
apache+php+mysql安装配置方法小结
2010/08/01 PHP
Linux下 php7安装redis的方法
2018/11/01 PHP
js数据验证集合、js email验证、js url验证、js长度验证、js数字验证等简单封装
2010/05/15 Javascript
根据IP的地址,区分不同的地区,查看不同的网站页面的js代码
2013/02/26 Javascript
js使用html()或text()方法获取设置p标签的显示的值
2014/08/01 Javascript
js完整倒计时代码分享
2016/09/18 Javascript
Angular 中 select指令用法详解
2016/09/29 Javascript
javascript 实现动态侧边栏实例详解
2016/11/11 Javascript
Javascript使用SWFUpload进行多文件上传
2016/11/16 Javascript
使用原生js写ajax实例(推荐)
2017/05/31 Javascript
详解vue.js的事件处理器v-on:click
2017/06/27 Javascript
echarts统计x轴区间的数值实例代码详解
2019/07/07 Javascript
jQuery 实现DOM元素拖拽交换位置的实例代码
2020/07/14 jQuery
在Vue中使用mockjs代码实例
2020/11/25 Vue.js
利用Vue实现简易播放器的完整代码
2020/12/30 Vue.js
python中根据字符串调用函数的实现方法
2016/06/12 Python
python遍历 truple list dictionary的几种方法总结
2016/09/11 Python
利用Python如何将数据写到CSV文件中
2018/06/05 Python
破解安装Pycharm的方法
2018/10/19 Python
python调用虹软2.0第三版的具体使用
2019/02/22 Python
利用Python半自动化生成Nessus报告的方法
2019/03/19 Python
python3实现猜数字游戏
2020/12/07 Python
Python自动化之UnitTest框架实战记录
2020/09/08 Python
CSS3的calc()做响应模式布局的实现方法
2017/09/06 HTML / CSS
DJI大疆无人机官方商城:全球领先的无人飞行器研发和生产商
2016/12/21 全球购物
介绍一下如何优化MySql
2016/12/20 面试题
自荐信的五个重要部分
2013/10/29 职场文书
护理中职生求职信范文
2014/02/24 职场文书
网络编辑岗位职责
2014/03/18 职场文书
优秀研究生主要事迹
2014/06/03 职场文书
安全生产标语大全
2014/10/06 职场文书
2015年民主生活会发言材料
2014/12/15 职场文书
先进个人材料怎么写
2014/12/30 职场文书
五一劳动节活动总结
2015/02/09 职场文书
小学重阳节活动总结
2015/03/24 职场文书
2015年办公室个人工作总结
2015/04/20 职场文书