前端切图:自制简易音乐播放器

音乐播放器是一个非常常见的应用,这篇博客就是介绍如何制作一个简单的音乐播放器,这款音乐播放器具有以下的功能:图片旋转功能,点击播放,点击暂停播放的功能,音量调大调小功能,设置音频的播放时间,循环播放,自动播放,切换歌曲功能。

效果如下:

图片发自简书App

代码如下:

<!DOCTYPEhtml>
<html>
     <head>
          <metacharset="UTF-8">
          <title></title>
         
          <style>
             *{
                  margin:0;
                  padding:0;
                  border:0;
             }
             @keyframesimg{
                  0%{
                       transform:rotate(0deg);
                  }
                  
                  100%{
                       transform:rotate(360deg);
                  }
             }
             .img{
                  background:url(004.jpg)no-repeat;
                  width:200px;
                  height:200px;
                  background-size:100%100%;
                  border:1pxsolid#d1d1d1;
                  border-radius:50%;
                  animation:img3sinfinitelinearpaused;
             }
             .img.runing{
                  animation-play-state:running;
             }
             
             li{
                  height:50px;
                  line-height:50px;
                  text-indent:10px;
             }
             
             li+li{
                  border-top:1pxsolidred;
             }
             
             .volume{
                  display:inline-block;
                  width:40px;
                  height:40px;
                  border:1pxsolid#d1d1d1;
                  text-align:center;
                  line-height:40px;
             }
         </style>
         <scriptsrc="http://code.jquery.com/jquery-1.8.0.min.js";></script>
     </head>
     <body>
          <divclass="img"></div>
          <ul>
             <!-- data-*  自定义属性 -->
             <!-- jquery 有一个 data 方法可以直接获取-->
              <lidata-src="1.mp3">在见</li>
              <lidata-src="2.mp3">长安街</li>
          </ul>
         <!-- loop="loop" 循环播放 -->
         <!-- autoplay 自动播放 -->
          <audiocontrols loop="loop"autoplay="autoplay">
              <sourcesrc="1.mp3"type="audio/mp3"></source>
          </audio>
          <spanclass="volume"data-volume="0.1">+</span>
          <spanclass="volume"data-volume="-0.1">-</span>
          <script>
             varaudio=$("audio").get(0);
             //监听 音频播放
             $(audio).on("play",function(){
                   $(".img").addClass("runing");
              });
             //监听 音频暂停
             $(audio).on("pause",function(){
                   $(".img").removeClass("runing");
                  //暂停的时候 判断当前音乐是否播放完毕
                  if(audio.ended){//播放完毕时 ended 状态为 true
                       audio.currentTime=0;//设置因为进度为 0
                       audio.src="2.mp3";  //修改音乐播放地址
                       audio.play();         //播放
                  }
              });
             
              $(".volume").on("click",function(){
                  //取出自定义属性上的 值,用来区分 加 减
                  varvolume=audio.volume+$(this).data("volume");
                  if(volume>1){
                        volume=1;//声音最大为 1
                  }
                  if(volume<0){
                        volume=0;//最小为 0 0 为静音
                  }
                  audio.volume=volume;
              })
             
              $("li").on("click",function(){
                  varsrc=$(this).data("src");
                  //设置音频的播放时间
                  audio.currentTime=0;
                  audio.src=src;
                  
                  audio.play();//播放
                  // audio.pause(); //暂停
             });
             
             
         </script>
     </body>
</html>

原文作者:祈澈姑娘 技术博客:https://www.jianshu.com/u/05f416aefbe1 90后前端妹子,爱编程,爱运营,爱折腾。 坚持总结工作中遇到的技术问题,坚持记录工作中所所思所见,欢迎大家一起探讨交流。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏编程微刊

【福利】小程序开发资源干货汇总

45030
来自专栏大前端开发

GitHub在其网站实现中移除对jQuery的使用

7月25日,一则发自Github员工的Twitter推文引起了不少开发者的关注和评论,以下是推文原文:

10740
来自专栏腾讯大讲堂的专栏

H5游戏开发指南

在上月底,一则有关HTML5游戏的的消息震惊业界,蝴蝶互动宣布旗下的《传奇世界》月流水破1500万,成为业内首款千万级别爆款游戏,这无疑给H5游戏行业注入了一针...

1.1K100
来自专栏Keegan小钢

009 | 快速入门Web前端开发的正确姿势

入门标准很简单,就一条:达到能参与 Web 前端实际项目的开发水平。请注意,是实际项目,这就需要了解如今的实际项目开发都用了哪些技术栈。HTML/CSS/Jav...

22740
来自专栏快乐八哥

JavaScript入门

在Web开发日益成熟的过程中,PHP和JavaScript已经成为了Web工程师的必备技能。前者因为LAMP的经典组合,而后者JavaScript在经历过Jav...

20080
来自专栏知晓程序

开发 | 小程序如何快速适配 iPhone X?

但是,由于 iPhone X 的「异型」屏幕,以及底部的「小白条」的存在,不少开发者都头疼应该如何适配这块略显奇怪的屏幕。

30640
来自专栏EAWorld

组件化——前端编程的选择

一、前端为什么要做组件化 在大型软件系统中,web应用的前后端已经实现了分离,而随着REST软件架构的发展,后端服务逐步倾向于微服务,简单来说就是将一个大型后...

42870
来自专栏编程微刊

前端切图:自制简易音乐播放器

18730
来自专栏互联网杂技

为未来的SaaS应用提供新的交互及视觉设计

云端软件即服务已代替传统笨重的桌面软件,打造优异的用户使用界面让你的应用脱颖而出已是势在必行之事,然而这也意味着诸多的挑战。 本文介绍给大家一些基本需要关注的点...

373120
来自专栏程序员的诗和远方

JavaScript 陀螺仪检测设备方向(重力感应)

随着陀螺仪作为只能手机的标配,根据手机角度不同,让图片有点视差微动效果可以给用户一点惊喜,于是简单研究了一下 HTML5 下利用陀螺仪获取设备方向的 API。...

2.4K70

扫码关注云+社区

领取腾讯云代金券