微信小程序如何调用录音与播放录音

这次给大家带来微信小程序如何调用录音播放录音,微信小程序调用录音与播放录音的注意事项有哪些,下面就是实战案例,一起来看一下。

小程序中提供了两种录音的API

旧版录音功能

首先启动录音,然后停止录音即可拉到音频的临时地址

启动录音:

var that = this;  wx.startRecord({   success: function (res) {    // 调用了停止录音接口就会触发这个函数,res.tempFilePath为录音文件临时路径    var tempFilePath = res.tempFilePath    that.setData({     src: tempFilePath    })   },   fail: function (res) {    //录音失败的处理函数   }  })

登录后复制

停止录音:

wx.stopRecord()

登录后复制

播放录音:

wx.playVoice({ filePath: src // src可以是录音文件临时路径})

登录后复制

新版录音

获取全局唯一的录音管理器,然后录音都依赖他,而播放录音则需要内部 audio 上下文 innerAudioContext 对象。

获取全局唯一的录音管理器:

var that = this;  this.recorderManager = wx.getRecorderManager();  this.recorderManager.onError(function(){   // 录音失败的回调处理  });  this.recorderManager.onStop(function(res){   // 停止录音之后,把录取到的音频放在res.tempFilePath   that.setData({    src: res.tempFilePath    })   console.log(res.tempFilePath )  });

登录后复制

开始录音:

this.recorderManager.start({   format: 'mp3' // 如果录制acc类型音频则改成aac});

登录后复制

结束录音:

this.recorderManager.stop()

登录后复制

播放音频:

this.innerAudioContext = wx.createInnerAudioContext();  this.innerAudioContext.onError((res) => {   // 播放音频失败的回调  })  this.innerAudioContext.src = this.data.src; // 这里可以是录音的临时路径  this.innerAudioContext.play()

登录后复制

相信看了本文案例你已经掌握了方法,更多精彩请关注【创想鸟】其它相关文章!

推荐阅读:

以上就是微信小程序如何调用录音与播放录音的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2772764.html

(0)
上一篇 2025年3月8日 13:31:24
下一篇 2025年3月8日 13:31:37

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • 在微信小程序里添加弹出对话框

    这次给大家带来在微信小程序里添加弹出对话框,在微信小程序里添加弹出对话框的注意事项有哪些,下面就是实战案例,一起来看一下。 关键代码 ①、index.wxml 提示:{{tip}}点击我弹出modal对话框 您好,我是modal对话框 登录…

    编程技术 2025年3月8日
    200
  • 如何从小程序中提取公用函数到util.js

    本篇文章给大家分享的内容是如何从小程序中提取公用函数到util.js ,有着一定的参考价值,有需要的朋友可以参考一下 在小程序中,定义了一项工具文件utils,此文件的js旨在本文件之内有效,当其他子页面想调用其中的js方法或者变量时,需要…

    2025年3月8日
    200
  • 微信小程序怎样使图片上传至服务器

    这次给大家带来微信小程序怎样使图片上传至服务器,微信小程序使图片上传至服务器的注意事项有哪些,下面就是实战案例,一起来看一下。 -wxml 发布项目 /**选择图片 */ choose: function () { var that = t…

    编程技术 2025年3月8日
    200
  • JS实现音乐切换播放以及轮流播放

    这次给大家带来JS实现音乐切换播放以及轮流播放,JS实现音乐切换播放以及轮流播放的注意事项有哪些,下面就是实战案例,一起来看一下。 welcome .content { width: 600px; margin:0 auto; border…

    编程技术 2025年3月8日
    200
  • JS点击循环切换播放图片

    这次给大家带来JS点击循环切换播放图片,JS点击循环切换播放图片的注意事项有哪些,下面就是实战案例,一起来看一下。 单击循环切换图片var i = 1;function nextImg(){i++;//步骤2:获取页面元素var next …

    编程技术 2025年3月8日
    200
  • 使用微信小程序block步奏详解

    这次给大家带来使用微信小程序block步奏详解 ,使用微信小程序block的注意事项有哪些,下面就是实战案例,一起来看一下。 经过一年的发展,微信小程序发展火热,本期就介绍下小程序的一些使用。 在安卓中我们经常会使用ListView/Gra…

    2025年3月8日
    200
  • jquery点击缩略图切换播放效果实现

    这次给大家带来jquery点击缩略图切换播放效果实现,jquery点击缩略图切换播放的注意事项有哪些,下面就是实战案例,一起来看一下。 jquery点击缩略图切换视频播放是一款非常实用的播放代码,点击视频缩略图切换优酷视频播放的视频播放选项…

    2025年3月8日 编程技术
    200
  • 微信小程序api封装

    这次给大家带来微信小程序api封装,微信小程序api封装的注意事项有哪些,下面就是实战案例,一起来看一下。 promise化的原因 微信小程序的api用的是对象参数回调模式,很容易造成回调地狱,代码难以阅读,判断,修改 和调试. 微信小程序…

    编程技术 2025年3月8日
    200
  • 你微信小程序登录鉴权使用技巧

    这次给大家带来你微信小程序登录鉴权使用技巧,你微信小程序登录鉴权使用的注意事项有哪些,下面就是实战案例,一起来看一下。 前言 为了方便小程序应用使用微信登录态进行授权登录,微信小程序提供了登录授权的开放接口。乍一看文档,感觉文档上讲的非常有…

    2025年3月8日
    200
  • 微信小程序分享页面后跳转回首页

    这次给大家带来微信小程序分享页面后跳转回首页,微信小程序分享页面后跳转回首页的注意事项有哪些,下面就是实战案例,一起来看一下。 今天我分享另外一种方法。请看下面.gif; 有没有发现,左上角有返回按钮了。原理简单,在你要分享的页面,分享配置…

    2025年3月8日
    200

发表回复

登录后才能评论