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

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

效果如下：

图片发自简书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 状态为 trueaudio.currentTime=0;//设置因为进度为 0audio.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后前端妹子，爱编程，爱运营，爱折腾。
坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，欢迎大家一起探讨交流。

转载于:https://www.cnblogs.com/wangting888/p/9701496.html

前端切图:自制简易音乐播放器相关推荐

JavaScript + Audio API自制简易音乐播放器（详细完整版、小白都能看懂）
JavaScript + Audio API自制简易音乐播放器(详细完整版) ** 音乐播放器的功能清单如下: ** 1.点击暂停按钮,歌曲暂停 2.点击播放按钮,歌曲播放 3.单曲循环与取消单曲循环 ...
JQuery实现简易音乐播放器
自学前端有一阵子了,之前一直都是跟着教学视频来写一些小例子,实现页面效果和功能,这次下定决心开始自己设计并实现一个网页版的音乐播放器,来巩固之前所学的html,css ,js,JQuery等知识. 在 ...
单片机音乐播放器课程设计C语言,单片机课程设计简易音乐播放器
单片机课程设计简易音乐播放器论文题目:简易音乐播放器所属系部:电子工程系指导教师: 学生姓名: 学号: 专业: 电子信息工程技术题目: 简易音乐播放器任务与要求:本设计以 MCS-51 系列 ...
html实现简易音乐播放器
目标: 使用vue.js导包的形式做一个简单的音乐播放器,新手也很容易看懂. 内容: 1. 使用了flex实现响应式布局: 2. 使用min-width防止字体被压缩: 3. 使用computed计算 ...
Android Studio简易音乐播放器设计作业
Android Studio简易音乐播放器设计作业实验成功展示实验代码 MainActivity.java XML文件 class文件利用BroadcastReceiver模拟音乐播放器,实现播 ...
【毕业设计】28-基于单片机的音乐播放器简易音乐播放器设计（原理图+源代码+仿真工程+答辩PPT+答辩论文）
typora-root-url: ./ [毕业设计]28-基于单片机的音乐播放器简易音乐播放器设计(原理图+源代码+仿真工程+答辩PPT+答辩论文) 文章目录 typora-root-url: ./ ...
【微信小程序】简易音乐播放器，进度条拖拉、音乐的播放与暂停
小程序简易音乐播放器实现粗糙的页面设计: wxml部分: <view class="test"><view class="img">& ...
利用Broadcast及相关组件实现简易音乐播放器功能
目录前言项目源码准备工作代码编写页面布局 Service类的创建主函数的编写项目心得前言在Andriod Studio中使用Broadcast实现了简易音乐播放器的功能.可以进行播放 ...
PyQt5实现简易音乐播放器
PyQt5实现简易音乐播放器环境 vscode python 3.10.0 PyQt5 5.15.4 功能目标能够读取本地的音乐文件,并实现播放的开关.曲目的切换和音量的加减具体实现新建一个文 ...

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

前端切图:自制简易音乐播放器相关推荐

最新文章

热门文章