请选择 进入手机版 | 继续访问电脑版

人人商城开发

 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,访问微社区

搜索
热搜: 活动 交友 discuz
查看: 598|回复: 0

HTML5+CSS3+jquery实现简单的音乐播放器

[复制链接]

67

主题

87

帖子

640

积分

超级版主

Rank: 8Rank: 8

积分
640
发表于 2018-1-9 06:02:50 | 显示全部楼层 |阅读模式
HTML5+CSS3+jquery实现简单的音乐播放器

  1. <div class="Music">
  2.   <div class="MusicPlaySound">
  3.   <img class="MusicPlayBg" src="image/music/zsy.png" />
  4.   <img class="MusicPlayProcess rotate" src="image/music/yyjd.png" />
  5.     <div class="MusicPlayBox">
  6.       <h3 class="title">一番の宝物</h3>
  7.       <p class="name">Lisa(Yui final ver)</p>
  8.       <div class="MusicPic"> <img class="MusicPicName PicNameRotate" src="image/music/yifan.jpg" /> <img class="MusicPicButton" src="image/music/pause.png" /> </div>
  9.       <div class="Share icon">分享</div>
  10.       <div class="Next icon">切歌</div>
  11.     </div>
  12.   </div>
  13.   <audio src="music/Yuiki.mp3" autoplay=""></audio>
  14. </div>
复制代码
  1. .MusicPlayProcess.rotate{animation:rotate 30s infinite linear;}
  2. .MusicPlayProcess.pause{animation-play-state:paused;
  3. -webkit-animation-play-state:paused;}
  4. .MusicPicName.PicNameRotate{animation:rotate 4s infinite linear;}
  5. .MusicPicName.pause{animation-play-state:paused;
  6. -webkit-animation-play-state:paused;}
  7. @keyframes rotate{
  8.     from{ transform:rotate(0deg)}
  9.     to{ transform:rotate(360deg)}
  10. }
复制代码
  1. $(function(){
  2.     var play=1;
  3.     $(".MusicPicButton").click(function(){
  4.         if(play==0){
  5.             $(this).attr("src","image/music/pause.png")
  6.             $(".MusicPlayProcess").removeClass("pause")
  7.             $(".MusicPicName").removeClass("pause")   
  8.             $("audio").get(0).play();
  9.             play=1;
  10.         }else{
  11.             $(this).attr("src","image/music/play.png")
  12.             $(".MusicPlayProcess").addClass("pause")
  13.             $(".MusicPicName").addClass("pause")   
  14.             play=0;
  15.             $("audio").get(0).pause();
  16.         }
  17.         
  18.     })
  19.    
  20. })
复制代码

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

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

播放。。。暂停。。。

转自;https://www.cnblogs.com/LoveOrHate/p/4700727.html
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|人人商城开发

GMT+8, 2020-4-1 00:43 , Processed in 0.079665 second(s), 27 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表