【H5 音乐播放实例】第三节 音乐详情页制作(3)

简介: 【H5 音乐播放实例】第三节 音乐详情页制作(3)

接下来我们开始制作播放按钮:

64.png65.png


默认图标的颜色是黑色,而且字体很小,我们需要对这个图标进行css样式美化和绝对定位。

66.png67.png


接下来,我们给这个播放按钮添加一个点击事件,点击之后就播放一首歌曲。

68.png

然后,在body区域随便添加一个audio标签,用于播放音乐。

69.png

在项目根目录新建一个mp3文件夹,专门用来存放歌曲:

70.png


现在编写playMusic方法,去播放01.MP3。

71.png

接下来做一个音乐播放时候的旋转效果,用css3中的keyframes来做。

72.png


73.png

当点击播放按钮的时候,就给当前对象(i标签)添加一个旋转的class。

74.png75.png


完成!

相关文章
|
1月前
|
前端开发 小程序 JavaScript
小程序海报,极简的实现方式
小程序海报,极简的实现方式
36 2
小程序海报,极简的实现方式
|
4月前
|
前端开发 小程序
【微信小程序-原生开发】实用教程20 - 生成海报(实战范例为生成活动海报,内含生成指定页面的小程序二维码,保存图片到手机,canvas 系列教程)
【微信小程序-原生开发】实用教程20 - 生成海报(实战范例为生成活动海报,内含生成指定页面的小程序二维码,保存图片到手机,canvas 系列教程)
408 0
|
4月前
|
JavaScript
vue 在线聊天实战范例(含选择发送表情、图片、视频、音频,自定义右键快捷菜单,一键复制,左右聊天气泡)
vue 在线聊天实战范例(含选择发送表情、图片、视频、音频,自定义右键快捷菜单,一键复制,左右聊天气泡)
259 0
|
4月前
仿照微信朋友圈中点击图片出现大图浏览效果
仿照微信朋友圈中点击图片出现大图浏览效果
63 0
|
11月前
|
C# 数据库
C#桌面文案小工具 ,详细带解说图(带源码)
C#桌面文案小工具 ,详细带解说图(带源码)
|
6月前
|
存储 JSON 5G
短视频批量制作-常用功能
越来越多的产品选择使用短视频作为内容承载,通过对媒体素材进行简单的剪辑,即可进行使用和投放,本文基于智能媒体服务IMS,介绍短视频剪辑中的常用功能,通过对不同功能的组合,方便客户组装自己的剪辑场景,进行短视频批量合成。
215 0
短视频批量制作-常用功能
|
算法 小程序 开发者
泡泡龙游戏的完整制作流程和模版
嗨!大家好,我是小蚂蚁。在经过了两个多周的折腾,泡泡龙游戏系列教程总算是告一段落了,今天的这篇文章主要梳理一下泡泡龙游戏的整个制作流程。 在看了整个制作流程之后,你多少都会对泡泡龙游戏的整体有一个比较全面的认识和了解。
139 0
|
移动开发 前端开发 容器
【H5 音乐播放实例】第二节 音乐详情页制作(2)
【H5 音乐播放实例】第二节 音乐详情页制作(2)
|
移动开发
【H5 音乐播放实例】第四节 音乐详情页制作 -音乐的播放和暂停
【H5 音乐播放实例】第四节 音乐详情页制作 -音乐的播放和暂停
145 0
|
移动开发 前端开发 JavaScript
【H5 音乐播放实例】第一节 音乐详情页制作(1)
【H5 音乐播放实例】第一节 音乐详情页制作(1)
130 0