微信小程序学习总结（旋转音乐盒）

已于 2022-03-19 17:31:17 修改
阅读量549 收藏 2
点赞数
文章标签： 微信小程序
于 2022-03-19 17:30:21 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wuhuayfz/article/details/123598553
版权

1.wxml中写 image标签

class 名用三目运算设置，添加点击事件changer

2.编写样式

设置动画

并设置点击后image的样式

3. .js中创建音频

constinnerAudioContext=wx.createInnerAudioContext()

设置自动播放

innerAudioContext.autoplay=false

设置循环播放

innerAudioContext.loop=true

最低0.47元/天 解锁文章
不会武功的来福
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
微信小程序 - 页面背景音乐播放器控件（音乐盒图标旋转 360° 动画且可点击暂停与播放）
王佳斌
03-24 2581
前言 因为无法插入视频，您所看到的是效果图（实则控制音乐），运行起来 有背景音乐。 默认直接播放音乐，用户可点击暂停与继续播放， 除了基础功能，也做好了播放、暂停、出错等监听，由您根据业务进行扩展。 示例代码 代码干净整洁(注释超级详细)，无任何冗余及废代码，可根据业务自由扩展。 建议您打开 微信官方文档，以便查阅更多功能， 随便找个页面，复制以下代码，直接运行： <!--index.wxml--> <view class="container"> <image
微信小程序总结篇
MoMo@blog
12-21 1514
1.style绑定 &amp;amp;lt;view style=&amp;quot;background: url( {{ good.coverUrl }} ) no-repeat;&amp;quot;&amp;amp;gt;&amp;amp;lt;/view&amp;amp;gt; 2.class绑定 &amp;amp;lt;view class=&amp;quot;{{is_checked === 0
微信小程序有旋转动画效果的音乐组件实例代码
10-18
主要介绍了微信小程序有旋转动画效果的音乐组件,需要的朋友可以参考下
uniapp 点击播放音乐（音频）
byf5229的博客
06-19 3135
uniapp通过uni.createInnerAudioContext()获取音频的信息。通过innerAudioContext.autoplay = true;通过innerAudioContext.loop=true;使用play() 播放方法时，加入定时器，可以变得相对于稳定的使用。通过innerAudioContext.src=”音乐地址“play()播放和pause()暂停。
微信小程序开发：一个音乐播放器
热门推荐
Spider--Man
04-12 2万+
github源码地址 花了点时间撸了个微信小程序，分两个部分，音乐播放界面和音乐列表。 总结一下遇到的问题 UI分4层，第一层背景高斯模糊，第二层灰色半透明蒙层，第三层播放器，第四层列表 css设置背景图片路径不能是本地的，需要设置为网络图片，或者base64编码 图片旋转暂停通过移除或添加css的animation-play-state: paused;设置 本地存储当前播放的音乐，下次进
微信小程序实现音乐播放器（2）
richest_qi的博客
07-21 1万+
是全局唯一的背景音频管理器。小程序切入后台，如果音频处于播放状态，可以继续播放。但是后台状态不能通过调用API操纵音频的播放状态。从微信客户端6.7.2版本开始，如果需要小程序切后台后继续播放音频，需要在全局配置文件app.json。属性，如"requiredBackgroundModes"["audio"]实例，可以通过wx.getBackgroundAudioManager()中配置requiredBackgroundModes。............
微信小程序开发总结
02-25
微信小程序是微信公众平台推出除服务号、订阅号、企业号外的第四种微信内应用类型，它是一种全新的连接用户与服务的方式，它可以在微信内被便捷地获取和传播，同时具有出色的仿原生app的交互使用体验和实用功能。...
微信小程序 仿网易云音乐 (源码)
05-30
微信小程序 仿网易云音乐 (源码)微信小程序 仿网易云音乐 (源码)微信小程序 仿网易云音乐 (源码)微信小程序 仿网易云音乐 (源码)微信小程序 仿网易云音乐 (源码)微信小程序 仿网易云音乐 (源码)微信小程序 仿网易云...
微信小程序源码 仿网易云音乐(学习版)
06-18
微信小程序源码 仿网易云音乐(学习版)微信小程序源码 仿网易云音乐(学习版)微信小程序源码 仿网易云音乐(学习版)微信小程序源码 仿网易云音乐(学习版)微信小程序源码 仿网易云音乐(学习版)微信小程序源码 仿网易云...
微信小程序源码-仿酷狗音乐微信小程序
09-28
微信小程序源码，案例，模仿酷狗音乐
微信小程序-微信小程序：音乐播放器
08-05
微信小程序： 音乐播放器 歌曲资源来源于 baidu音乐 截图 TODO 收藏列表 切换上一曲/下一曲
微信小程序源码 万年历(学习版)
06-18
微信小程序源码 万年历(学习版)微信小程序源码 万年历(学习版)微信小程序源码 万年历(学习版)微信小程序源码 万年历(学习版)微信小程序源码 万年历(学习版)微信小程序源码 万年历(学习版)微信小程序源码 万年历(学习...
小程序基本命令
aiven1637的博客
10-30 3247
onLoad: function () { // 生命周期函数--监听页面加载 onReady: function () { // 生命周期函数--监听页面初次渲染完成 }, onShow: function () { // 生命周期函数--监听页面显示 }, onHide: function () { // 生命周期函数--监...
微信小程序 音乐播放代码(播放方式，歌词滚动) （更新优化版：添加文字颜色过渡）
PrimaryColor
08-21 6244
效果图： wxml： <view class="container flex-align"> <view style="text-align:center;position:relative;" class="box"> <view style="color:white;">{{songs.name}}</view> <view style="color:#ddd;" class="f12">{{songs.ar[0].name}}&l
微信小程序背景音乐的调试
技术分享
03-12 1万+
backgroundAudioManager 对象的方法列表： 方法 参数 说明 play 播放 pause 暂停 stop 停止 seek position 跳转到指定位置，单位 s onCanplay callback 背景音频进入可以播放状态，但不保证后面可以流畅播放 on...
html背景音乐微信播放器,微信小程序播放背景音乐(示例代码)
weixin_32518317的博客
06-04 515
小程序实现和h5一样的音乐图标一直旋转。一、.js中封装旋转动画方法添加animation属性data:{animation:‘‘"}改变animation的值(官网提供角度范围是-180~180，但是我发现角度越大会一直旋转)onShow: function() {console.log(‘index---------onShow()‘)this.animation =wx.createAnim...
小程序自动播放音频
my_yiren的博客
10-08 4707
js 进入小程序就自动播放音频 onShow:function(){ const innerAudioContext = wx.createInnerAudioContext(); innerAudioContext.autoplay = true; innerAudioContext.src = "http://ws.stream.qqmusic.qq.com/M500001V...
使用小程序云开发添加背景音乐
weixin_44062172的博客
08-07 4467
使用小程序云开发添加背景音乐且实现后台播放 在网上看了很多种方法，有一些对浏览器有一定的要求，于是懒癌患者想出了另一种办法 首先，要在小程序里添加音频，需要在js里写一段代码： （此方法来自微信官方https://developers.weixin.qq.com/miniprogram/dev/api/media/background-audio/BackgroundAudioManager.ht...
微信小程序播放背景音乐
苏苏就是小苏苏的博客
01-07 4926
1.实现效果 2.实现原理 1、wx.getBackgroundAudioManager ： 获取全局唯一的背景音频管理器。 小程序切入后台，如果音频处于播放状态，可以继续播放。但是后台状态不能通过调用API操纵音频的播放状态。 从微信客户端6.7.2版本开始，若需要在小程序切后台后继续播放音频，需要在 app.json 中配置 requiredBackgroundModes 属性。开发版和体验版上可以直接生效，正式版还需通过审核。 2、onUnload和onHide事件中暂停音乐的播放。 3、onSho
用微信小程序开发网易云音乐
最新发布
12-13
根据提供的引用内容，我们可以发现有两个微信小程序仿制了网易云音乐，其中一个是基于微信小程序云开发的音乐播放器小程序源码，另一个是仿网易云音乐的微信小程序，它们都提供了源代码和截图。因此，我们可以通过...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值