html背景音乐微信播放器,微信小程序播放背景音乐(示例代码)

小程序实现和h5一样的音乐图标一直旋转。

一、.js中封装旋转动画方法

添加animation属性

data:{

animation:‘‘"}

改变animation的值(官网提供角度范围是-180~180，但是我发现角度越大会一直旋转)

onShow: function() {

console.log(‘index---------onShow()‘)this.animation =wx.createAnimation({

duration:1400,

timingFunction:‘linear‘, //"linear","ease","ease-in","ease-in-out","ease-out","step-start","step-end"

delay: 0,

transformOrigin:‘50% 50% 0‘,

success: function(res) {

console.log("res")

}

})

rotateAni: function (n) {

console.log("rotate=="+n)this.animation.rotate(180*(n)).step()this.setData({

animation:this.animation.export()

})

二、在.wxml中需要的控件上添加animation属性

三、连续动画需要添加定时器

var n = 0,

that= this;this.interval =setInterval(function () {

n++;

that.rotateAni(n);

},1400);

onLoad 或者 show 的时候执行或者看业务需求。

微信达到播放音乐的效果

一、方法一。

点击的时候播放一段语音(也可以是音乐)，这种方法不适合做背景音乐，类似h5的那样背景音乐。

点击音乐图标的时候

onmusicTap: function (event) {if (this.data.isPlayingMusic) {

wx.pauseBackgroundAudio();this.setData({

isPlayingMusic:false});

}else{

wx.playBackgroundAudio({

dataUrl:‘https://www.zhitaochan.cn/Opening.mp3‘});this.setData({

isPlayingMusic:true});

}

判断当前是否在在播放这段音乐，没有则播放，播放中就不执行播放。

在onLoad的时候执行

wx.playBackgroundAudio({

dataUrl:‘https://www.zhitaochan.cn/Opening.mp3‘});

方法二、H5一样的背景音乐，一直播放可循环

onLoad的时候

const innerAudioContext =wx.createInnerAudioContext();

innerAudioContext.autoplay= true;

innerAudioContext.src= ‘https://www.zhitaochan.cn/Opening.mp3‘;

innerAudioContext.loop= true;

innerAudioContext.play();

html背景音乐微信播放器,微信小程序播放背景音乐(示例代码)相关推荐

小程序实现播放器功能小程序播放器怎么实现
实例:一个简单的播放器效果. 实现的功能: 1点击播放按钮.音频开始播放. 2播放的同时,进度条在不停的更新走动 3点击暂停按钮,音频停止播放 4当音频播放完毕以后,进度条再次回到原点 5当拖滑动滑块 ...
客户端跳转代码html5,HTML5跳转小程序wx-open-launch-weapp的示例代码
注意事项微信开放标签有最低的微信版本要求,以及最低的系统版本要求. 微信版本要求为:7.0.12及以上. 系统版本要求为:iOS 10.3及以上.Android 5.0及以上. 绑定域名微信安全域 ...
基于微信小程序java音乐播放器毕业设计论文/程序代码
摘要 5G时代已经慢慢的融入了我们的日常生活,随着国家的通信政策以及各大运营商的宣传的影响,5G手机已经随处可见,面对全球信息.技术空前高速发展,信息高速化发展更是社会进步的一个标志.在全球信息化 ...
微信应用号（小程序）资源汇总（1010更新）
wechat-weapp-resource 微信应用号(小程序)资源汇总. 每天不定期整理和收集微信小程序相关资源,方便查阅和学习,欢迎大家提交新的资源,完善和补充. 目录开源项目(1010更新) ...
微信小程序播放背景音乐
1.实现效果 2.实现原理 1.wx.getBackgroundAudioManager : 获取全局唯一的背景音频管理器. 小程序切入后台,如果音频处于播放状态,可以继续播放.但是后台状态不能通过调 ...
微信小程序播放器的一些简单功能实现
微信小程序播放器的一些简单功能实现准备工作一.构建npm(后面用到moment的格式化时间) 二.系统后台监测程序播放器配置(系统后台要知道该播放器是否在播放歌曲,并有一些简单的业务逻辑) 在ap ...
使用微信小程序播放视频直播
观众端使用live-player进行直播视频的播放,live-player组件从视频云拉流,并用于实时音视频播放.live-player支持两种模式:Live和RTC,前者用于直播播放,后者用于实时音 ...
taro开发微信小程序-播放轨迹(十一)
taro集成了地图后如何实现轨迹播放,暂停,停止呢?本身地图并不具备轨迹播放的能力,但是基于地图api可以实现轨迹播放的效果思路如下: 1.获取所有的轨迹坐标点-最好是数组格式的json 2.定义一 ...
C# 利用正则表达式获取文本中的https网址并替换新的对应的值,微信小程序播放腾讯视频
后台用KindEditor传了好几个视频地址,需要在微信小程序播放,复文本框写的内容是保存在数据库的一个字段的,就像下面这样,像这小程序播放,需要解析除真正的视频地址,所有需要获取里面的两个视频地址, ...
微信小程序播放bilibili视频
微信小程序播放B站视频前端代码 wxml文件 <view class="body-view" style="text-align: center;"&g ...

html背景音乐微信播放器,微信小程序播放背景音乐(示例代码)

html背景音乐微信播放器,微信小程序播放背景音乐(示例代码)相关推荐

最新文章

热门文章