【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


完成!

相关文章
|
5月前
|
C# 数据库
C#桌面文案小工具 ,详细带解说图(带源码)
C#桌面文案小工具 ,详细带解说图(带源码)
|
9月前
|
自然语言处理 Python Windows
|
10月前
|
自然语言处理 Python
|
12月前
|
缓存 开发工具 图形学
游戏开发实战教程(14):关卡编辑器的制作以及关卡分享功能的实现
上周在制作完闯关模式后,我有了在游戏中做一个关卡编辑器的想法,让玩家可以在游戏中制作自己的关卡进行挑战,甚至可以将自己制作的关卡与朋友进行分享。 原有的关卡编辑器是使用Unity做的,因为可以方便的进行文件的读取和写入,可以将设计好的关卡数据写入到文件中,然后在将文件中的数据导入到微信小游戏开发工具中。
250 0
|
算法 小程序 开发者
泡泡龙游戏的完整制作流程和模版
嗨!大家好,我是小蚂蚁。在经过了两个多周的折腾,泡泡龙游戏系列教程总算是告一段落了,今天的这篇文章主要梳理一下泡泡龙游戏的整个制作流程。 在看了整个制作流程之后,你多少都会对泡泡龙游戏的整体有一个比较全面的认识和了解。
88 0
|
移动开发 前端开发 容器
【H5 音乐播放实例】第二节 音乐详情页制作(2)
【H5 音乐播放实例】第二节 音乐详情页制作(2)
|
移动开发 前端开发 JavaScript
【H5 音乐播放实例】第一节 音乐详情页制作(1)
【H5 音乐播放实例】第一节 音乐详情页制作(1)
|
移动开发
【H5 音乐播放实例】第四节 音乐详情页制作 -音乐的播放和暂停
【H5 音乐播放实例】第四节 音乐详情页制作 -音乐的播放和暂停
111 0
|
移动开发 前端开发
【H5 音乐播放实例】第五节 音轨制作
【H5 音乐播放实例】第五节 音轨制作
104 0
|
移动开发 前端开发
【H5 音乐播放实例】第六节 其他
【H5 音乐播放实例】第六节 其他