jq实现音乐暂停播放

案列 

总体思路

1. 完成html与css和动画

2. 实现播放暂停主要代码

   1. e.paused  (暂停音频)  \e.pause()

   2. e.play() 播放

3. 最后在暂停和播放的时候添加一些css动画属性

   js

   1.  
       
   2.  
      $('.open').click(function(){//点击次执行函数
   3.  
      audios()
   4.  
      })
   5.  
      function audios(){
   6.  
      console.log($('#aud'))
   7.  
      var play=$('#aud')[0]//将音乐转换成数组
   8.  
      console.log(play)
   9.  
      if(play.paused){//如果音乐已经暂停了
   10.  
       play.play()//就播放
   11.  
       $('.open span').text('播放')
   12.  
       $('.music-img').css('animation','fu2 5s ease infinite')
   13.  
       $('.music-m').after().css('animation','fu1 2s infinite')
   14.  
       }else{
   15.  
       play.pause()//暂停
   16.  
       $('.open span').text('暂停')
   17.  
       $('.music-img').css('animation-play-state','paused')
   18.  
       $('.music-m').after().css('animation-play-state','paused')//动画暂停
   19.  
       }
   20.  
       }
   

   css

   1. 1.  
         body{
      2.  
         display: flex;
      3.  
         justify-content: center;
      4.  
         align-items: center;
      5.  
         height: 100vh;
      6.  
         flex-direction: column;
      7.  
         background: #333;
      8.  
         }
      9.  
         .music{
      10.  
          position: relative;
      11.  
          display: flex;
      12.  
          justify-content: center;
      13.  
          align-items: center;
      14.  
           
      15.  
          }
      16.  
          h2{
      17.  
          color: #fff;
      18.  
          }
      19.  
          .music-img{
      20.  
          position: relative;
      21.  
          width: 300px;
      22.  
          height: 300px;
      23.  
          border-radius: 50%;
      24.  
          overflow: hidden;
      25.  
          margin: 8rem 0;
      26.  
          /* animation: fu2 5s ease infinite;*/
      27.  
          }
      28.  
          .music-img::before{
      29.  
          content: '';
      30.  
          display: inline-block;
      31.  
          position: absolute;
      32.  
          z-index: 10;
      33.  
          top: 41%;
      34.  
          left: 39%;
      35.  
          height: 60px;
      36.  
          width: 60px;
      37.  
          background: #999;
      38.  
          border-radius: 50%;
      39.  
          }
      40.  
          .music-img::after{
      41.  
          content: '';
      42.  
          display: inline-block;
      43.  
          position: absolute;
      44.  
          top: 35%;
      45.  
          left: 32%;
      46.  
          height: 100px;
      47.  
          width: 100px;
      48.  
          background: #333;
      49.  
          border-radius: 50%;
      50.  
          }
      51.  
           
      52.  
          img{
      53.  
          width: 100%;
      54.  
          height: 100%;
      55.  
          }
      56.  
          .music-m{
      57.  
          position: absolute;
      58.  
          width: 350px;
      59.  
          height: 350px;
      60.  
          background: #161616;
      61.  
          border-radius: 50%;
      62.  
          transition: all 1s;
      63.  
          }
      64.  
          @keyframes fu1{
      65.  
          0%{
      66.  
          filter: hue-rotate(0deg);
      67.  
          }
      68.  
          50%{
      69.  
          filter: hue-rotate(180deg);
      70.  
          }
      71.  
          100%{
      72.  
          filter: hue-rotate(360deg);
      73.  
          }
      74.  
          }
      75.  
          @keyframes fu2{
      76.  
          0%{
      77.  
          transform: rotate(0deg);
      78.  
          }
      79.  
           
      80.  
          100%{
      81.  
          transform: rotate(360deg);
      82.  
          }
      83.  
          }
      84.  
          .music-m::before{
      85.  
          position: absolute;
      86.  
          top: -1.5rem;
      87.  
          content: '';
      88.  
          display: inline-block;
      89.  
          left: -1.8rem;
      90.  
          width: 400px;
      91.  
          height: 400px;
      92.  
          border: 4px solid #FF005F;
      93.  
          border-radius: 50%;
      94.  
          animation: fu1 2s infinite;
      95.  
          }
      96.  
          .music-bar{
      97.  
          width: 500px;
      98.  
          height: 50px;
      99.  
          background: #ccc;
      100.  
           color: #FF005F;
      101.  
           display: flex;
      102.  
           justify-content: center;
      103.  
           align-items: center;
      104.  
           cursor: pointer;
      105.  
           }
      106.  
           .music-bar span{
      107.  
           border:2px solid #FF005F;
      108.  
           display: inline-block;
      109.  
           padding: .5rem 1rem;
      110.  
           background: #efefef;
      111.  
           }
      112.  
           audio{
      113.  
           display: none;
      114.  
           }
      

      html

      1.  
         <h2>not shy</h2>
      2.  
         <div class="music">
      3.  
         <div class="music-m"></div>
      4.  
         <div class="music-img"><img src="img/not_shy.png" alt="not_shy" role="img"></div>
      5.  
         </div>
      6.  
         <div class="music-bar">
      7.  
         <div class="open"><span>播放</span></div>
      8.  
         </div>
      9.  
         <audio id="aud" src="shucai/not_shy.mp3" controls></audio>
      10.  
          <script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>//引入jq

      如果文章有误欢迎评论区留言QAQ

这篇好文章是转载于：学新通技术网