侯体宗的博客
  • 首页
  • Hyperf版
  • beego仿版
  • 人生(杂谈)
  • 技术
  • 关于我
  • 更多分类
    • 文件下载
    • 文字修仙
    • 中国象棋ai
    • 群聊
    • 九宫格抽奖
    • 拼图
    • 消消乐
    • 相册

微信小程序实现类似微信点击语音播放效果

微信(小程序)  /  管理员 发布于 3年前   632

本文实例为大家分享了微信小程序类似平常微信语音聊天的效果,不会互相干扰播放状态,供大家参考,具体内容如下

根据开发的需求,先理清一下思路,点击语音播放与暂停/停止,切换下一个语音等;
小程序对于audio的组件的一些api方法已经不支持了,详情可以参看:微信小程序audio组件文档

嗯嗯,这下子,该怎么办呢?

就如上面提到,小程序1.60版本后,给开发者提供了这个wx.createInnerAudioContext()api…具体使用可以看文档;

好的,现在该上代码了!

-wxml结构:

                

-wxss样式:

page{ background: #f0f0f0;}.output-audio{ width: 150rpx; margin: 30rpx; }.output-audio .audio{ padding: 20rpx; border-radius: 10rpx;background-color: #fff;border: 1px solid #f0f0f0; overflow: hidden; }.output-audio .audio .ico{ width: 26rpx; height: 30rpx; float: left;}.output-audio .audio .time{ float: right; font-size: 24rpx;}

-js方法:

// pages/audio/audio.js//创建audio控件const myaudio = wx.createInnerAudioContext(); Page({ /** * 页面的初始数据 */ data: { //音频列表 audioArr: [  {  id: '000',  src: 'https://s320.xiami.net/928/19928/1882512413/1772277226_1513175794617.mp3?ccode=xiami_web_web&expire=86400&duration=182&psid=485902a766977ecaae347a4cc851e8da&ups_client_netip=113.70.219.174&ups_ts=1551680441&ups_userid=0&utid=ljH9FKf0Um0CAQ7fs+HVAPRw&vid=1772277226&fn=1772277226_1513175794617.mp3&vkey=Bac0e9fde3983f090cef0a37e1cb73ef7',  time: '30s',  bl: false  },  {  id: '001',  src: 'https://s128.xiami.net/764/33764/2104642547/1810384080_1551417116476_5598.mp3?ccode=xiami_web_web&expire=86400&duration=181&psid=6320a01db73a6fdb9632f5800fc93fe5&ups_client_netip=113.70.219.174&ups_ts=1551680537&ups_userid=0&utid=ljH9FKf0Um0CAQ7fs+HVAPRw&vid=1810384080&fn=1810384080_1551417116476_5598.mp3&vkey=B54b264178201f6737c9bb5ff4bbce3d0',  time: '50s',  bl: false  }, ] }, //音频播放  audioPlay: function (e) { var that = this,  id = e.currentTarget.dataset.id,  key = e.currentTarget.dataset.key,  audioArr = that.data.audioArr,  vidSrc = audioArr[key].src; myaudio.src = vidSrc; myaudio.autoplay = true; //切换显示状态 for (var i = 0; i < audioArr.length; i++) {  audioArr[i].bl = false; } audioArr[key].bl = true;  myaudio.play();  //开始监听 myaudio.onPlay(() => {  that.setData({  audioArr: audioArr  }) }) //结束监听 myaudio.onEnded(() => {  audioArr[key].bl = false;  that.setData({  audioArr: audioArr,  }) }) }, // 音频停止 audioStop: function (e) { var that = this,  key = e.currentTarget.dataset.key,  audioArr = that.data.audioArr; //切换显示状态 for (var i = 0; i < audioArr.length; i++) {  audioArr[i].bl = false; } audioArr[key].bl = false; myaudio.stop(); //停止监听 myaudio.onStop(() => {  audioArr[key].bl = false;  that.setData({  audioArr: audioArr,  }) }) //结束监听 myaudio.onEnded(() => {  audioArr[key].bl = false;  that.setData({  audioArr: audioArr,  }) }) },  /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { }, /** * 生命周期函数--监听页面显示 */ onShow: function () { }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () {  }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () {  }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () {  }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () {  }, /** * 用户点击右上角分享 */ onShareAppMessage: function () {  }})

完整代码可访问本人github

 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

您可能感兴趣的文章:

  • 微信小程序把百度地图坐标转换成腾讯地图坐标过程详解
  • 微信小程序在ios下Echarts图表不能滑动的问题解决
  • 微信小程序文章详情页跳转案例详解
  • 微信小程序如何访问公众号文章
  • 监控微信小程序中的慢HTTP请求过程详解
  • 简单了解微信小程序的目录结构
  • 微信小程序的开发范式BeautyWe.js入门详解


  • 上一条:
    微信小程序如何访问公众号文章
    下一条:
    微信小程序文章详情页跳转案例详解
  • 昵称:

    邮箱:

    0条评论 (评论内容有缓存机制,请悉知!)
    最新最热
    • 分类目录
    • 人生(杂谈)
    • 技术
    • linux
    • Java
    • php
    • 框架(架构)
    • 前端
    • ThinkPHP
    • 数据库
    • 微信(小程序)
    • Laravel
    • Redis
    • Docker
    • Go
    • swoole
    • Windows
    • Python
    • 苹果(mac/ios)
    • 相关文章
    • 2023年9月1日起:微信小程序必须备案才能上线运营(0个评论)
    • 腾讯官方客服回应了:微信好友上限约10000个!(0个评论)
    • 2023年做微信小程序的老铁注意:新增收费项、微信小程序获取手机号也收费了(0个评论)
    • 小程序开发之跳转微信直播示例api(0个评论)
    • 在uni_app中开发小程序之常用功能示例代码汇总(0个评论)
    • 近期文章
    • 适用于 Laravel 的表单请求测试程序包(0个评论)
    • Laravel 10.25版本发布(0个评论)
    • 在go语言中实现生成文件的校验和功能代码示例(0个评论)
    • Laravel 11版本抢先看,看将有什么新功能发布(0个评论)
    • goose数据库迁移工具介绍及使用流程步骤(0个评论)
    • 中国程序员“翻墙”为海外软件公司打工,105.8万工资被罚没!转知乎(0个评论)
    • 在go语言gin框架中使用Sharding(Gorm分表中间件)实现分表流程步骤(0个评论)
    • 在PHP提高性能方式之开启OPCache扩展及OPCache配置参数详解(0个评论)
    • 在js的websocket客户端开发中遇到代码割裂情况解决方案(0个评论)
    • Laravel框架中适用于Eloquent的日期过滤软件包:lara-date-filter(0个评论)
    • 近期评论
    • 路人 在

      php中使用hyperf框架调用讯飞星火大模型实现国内版chatgpt功能示例中评论 教程很详细,如果加个前端chatgpt对话页面就完美了..
    • 博主 在

      科学上网翻墙之v2rayN-Core客户端免费公益节点使用教程中评论 @ mashrdn 多切换几个节点测试,免费ssr是没那么稳..
    • mashrdn 在

      科学上网翻墙之v2rayN-Core客户端免费公益节点使用教程中评论 V2rayn免费节点添加上去了,youtobe无法打开网页,是怎么回事..
    • 张伟 在

      科学上网翻墙之v2rayN-Core客户端免费公益节点使用教程中评论 3q!有用,不过免费节点隔天就要去git上复制新的导进去..
    • 博主 在

      科学上网翻墙访问Google , 上外网神器佛跳墙VPN(永久免费)使用流程步骤中评论 该篇教程已不能用了,告知大家,免的老有老铁问我!..
    • 2016-10
    • 2017-10
    • 2018-01
    • 2020-03
    • 2021-06
    • 2021-10
    • 2022-03
    • 2023-02
    • 2023-06
    • 2023-07
    • 2023-08
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客