前端切图:自制简易音乐播放器
时间:2022-05-30
本文章向大家介绍前端切图:自制简易音乐播放器,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
音乐播放器是一个非常常见的应用,这篇博客就是介绍如何制作一个简单的音乐播放器,这款音乐播放器具有以下的功能:图片旋转功能,点击播放,点击暂停播放的功能,音量调大调小功能,设置音频的播放时间,循环播放,自动播放,切换歌曲功能。
效果如下:
图片发自简书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后前端妹子,爱编程,爱运营,爱折腾。 坚持总结工作中遇到的技术问题,坚持记录工作中所所思所见,欢迎大家一起探讨交流。
- Python中eval带来的潜在风险,你知道吗?
- React Native自定义导航条
- android混淆那些坑
- 微信小程序开发入门篇
- Support Annotation Library使用详解
- React Native之Navigator
- React Native组件生命周期
- React Native使用原生组件
- Android ViewDragHelper及移动处理总结
- android 仿音悦台页面交互效果
- Webpack+Babel+React开发环境搭建
- Android Studio中 .gitignore配置
- Android系统服务之WindowManager整理
- gulp+webpack工具整合简介
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Redis过期策略和数据淘汰机制
- 图片由彩色渐变到黑白动画
- Kafka如何保证数据可靠性
- ubuntu中snap包的安装、更新删除与简单使用
- 学习在kernel态下使用NEON对算法进行加速的方法
- Centos7上Mesos和Marathon的安装和配置
- Redis高级数据类型-Bitmap和HyperLogLog
- Redis持久化策略
- 在linux下开启FTP服务方法介绍
- Linux中gpio接口的使用方法示例
- Three.js教程(1):初识three.js
- 解决Electron安装报错问题
- Linux端口映射转发的方法
- Centos7如何备份和还原Redis数据的方法
- linux contos6.8下部署kafka集群的方法