请选择 进入手机版 | 继续访问电脑版

12360技术网 - 专业IT技术发表平台

 立即注册  找回密码
查看: 7363|回复: 2

uniapp开发h5页面,实现背景音乐播放+暂停

[复制链接]

20

主题

21

帖子

91

积分

注册会员

Rank: 2

积分
91
发表于 2020-1-26 15:55:17 | 显示全部楼层 |阅读模式
背景

我们平常见到的h5页面,大多数都有背景音乐,打开页面自动播放,该文教大家如何利用uniapp开发h5,实现内置音乐播放、暂停,以及音乐icon的旋转和暂停动画。
创建音乐对象

代码如下:
  1. var innerAudioContext = uni.createInnerAudioContext();innerAudioContext.autoplay = true;//自动播放innerAudioContext.loop = true; //循环播放innerAudioContext.src = '../../static/你的音乐名称.mp3';innerAudioContext.onPlay(() => {//可以播放事件        console.log('开始播放');        this.playing = !innerAudioContext.paused;//查看是否可以自动播放});innerAudioContext.onError((res) => {        console.log(res.errMsg);        console.log(res.errCode);});
复制代码
需要注意:

  • 不是所有机型都可以自动播放,大部分安卓机可以自动播放,大部分ios机无法自动播放。
  • 如果无法自动播放,innerAudioContext.paused会等于false
  • 我们设置playing属性来控制音乐icon的旋转和暂停动画
使用animation-play-state属性

我们知道,普通的旋转动画不难实现,但是暂停呢?一般的做法是通过添加和删除动画的class来达到旋转和暂停,但是删除动画的class,音乐icon会回到初始位置,这种效果不太理想。实际上,css3确实可以暂停动画的执行,只需要添加animation-play-state属性。
animation-play-state有两个属性值,一个是running,另一个是paused。字面意思,可以控制动画的运行和暂停。
具体实现动画的代码如下:
  1.                 .flex-row {                display: flex;                flex-direction: row;        }        .center-center {                align-items: center;                justify-content: center;        }                .playing {                animation: run 10s linear 0s infinite;        }                .player {                position: fixed;                top: 30rpx;                right: 30rpx;                width: 65rpx;                height: 65rpx;                border-radius: 50%;                background-color: rgba(0, 0, 0, 0.1);                z-index: 999999;        }                .keepgo {                animation-play-state: paused;        }
复制代码
我们通过添加和移除keepgo样式,同样可以实现运行和暂停的效果,不一定是running。这样, 背景音乐的暂停和播放动画就实现了。
结语


今天是2020年除夕夜,遭遇了武汉病毒的大事件,这个年的味道变淡了。
我本人是武汉大学研究生,1月22日于武汉火车站发车,途径黄石北,换成到老家莆田。在家两日身体状况良好,无发热现象,还在每日观察中。
希望全世界人民都可以挺过这段艰难的日子,潜在病毒携带者好好呆在家里。我们一起度过难关。
武汉加油!中国加油!世界加油!
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!




上一篇:自己敲的low到爆炸的代码
下一篇:BZOJ-4589 FWT+生成函数+NIM博弈+快速幂
回复

使用道具 举报

0

主题

15

帖子

325

积分

中级会员

Rank: 3Rank: 3

积分
325
发表于 2020-1-28 16:57:45 | 显示全部楼层
楼主,大恩不言谢了![www.12360.co]
回复

使用道具 举报

0

主题

10

帖子

220

积分

中级会员

Rank: 3Rank: 3

积分
220
发表于 7 天前 | 显示全部楼层
其实我一直觉得楼主的品味不错!呵呵![www.12360.co]
回复

使用道具 举报

懒得打字嘛,点击右侧快捷回复 【右侧内容,后台自定义】
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

12360技术网

GMT+8, 2020-2-18 06:53 , Processed in 0.084729 second(s), 40 queries .

本网站内容收集于互联网,Www.12360.Co不承担任何由于内容的合法性及健康性所引起的争议和法律责任。 欢迎大家对网站内容侵犯版权等不合法和不健康行为进行监督和举报。

© 2019-2020 Www.12360.Co

快速回复 返回顶部 返回列表