热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

图文详解微信小程序中调用录音功能和音频播放的方法

这篇文章图文详解微信小程序中调用录音功能和音频播放的方法
老规矩,先几张图.

1.为了进来看得清楚.刚开始没有加载音频列表.代码往前挪一挪即可.

上代码:

1.index.wxml


        
                
                
                
                 
                存储路径:{{item.filePath}}
                存储时间:{{item.createTime}}
                音频大小:{{item.size}}KB
                  

                
                
                
        



        
        
        
        
        


        

2.index.wxss

/**index.wxss**/  
.speak-style{  
    position: relative;  
    height: 240rpx;  
    width: 240rpx;  
    border-radius: 20rpx;  
    margin: 50% auto;  
    background: #26A5FF;  
}  
.item-style{  
    margin-top: 30rpx;  
    margin-bottom: 30rpx;  
}  
.text-style{  
    text-align: center;  
  
}  
.record-style{  
    position: fixed;  
    bottom: 0;  
    left: 0;  
    height: 120rpx;  
    width: 100%;  
}  
.btn-style{  
  margin-left: 30rpx;  
  margin-right: 30rpx;  
}  
  
.sound-style{  
  position: absolute;  
  width: 74rpx;  
  height:150rpx;  
  margin-top: 45rpx;  
  margin-left: 83rpx;  
}  
  
  
.board {  
  overflow: hidden;  
  border-bottom: 2rpx solid #26A5FF;    
}  
/*列布局*/  
.cell{  
    display: flex;  
    margin: 20rpx;  
}  
.cell-hd{  
    margin-left: 10rpx;  
    color: #885A38;  
}  
.cell .cell-bd{  
    flex:1;  
    position: relative;  
     
}  
/**只显示一行*/  
.date{  
    font-size: 30rpx;  
    text-overflow: ellipsis;   
    white-space:nowrap;  
    overflow:hidden;   
}

3.index.js

//index.js  
//获取应用实例  
var app = getApp()  
Page({  
  data: {  
    j: 1,//帧动画初始图片  
    isSpeaking: false,//是否正在说话  
    voices: [],//音频数组  
  },  
  onLoad: function () {  
  },  
  //手指按下  
  touchdown: function () {  
    console.log("手指按下了...")  
    console.log("new date : " + new Date)  
    var _this = this;  
    speaking.call(this);  
    this.setData({  
      isSpeaking: true  
    })  
    //开始录音  
    wx.startRecord({  
      success: function (res) {  
        //临时路径,下次进入小程序时无法正常使用  
        var tempFilePath = res.tempFilePath  
        console.log("tempFilePath: " + tempFilePath)  
        //持久保存  
        wx.saveFile({  
          tempFilePath: tempFilePath,  
          success: function (res) {  
            //持久路径  
            //本地文件存储的大小限制为 100M  
            var savedFilePath = res.savedFilePath  
            console.log("savedFilePath: " + savedFilePath)  
          }  
        })  
        wx.showToast({  
          title: '恭喜!录音成功',  
          icon: 'success',  
          duration: 1000  
        })  
        //获取录音音频列表  
        wx.getSavedFileList({  
          success: function (res) {  
            var voices = [];  
            for (var i = 0; i 

通过以上实现方式,我们就可以在小程序里快乐的录音并播放了,你学会了么?


注意:

1.录音的音频默认是存在本地的临时路径下.第二次进入小程序无法正常使用,可以存持久,但是本地文件大小的限制是100M,最好还是上传后台.

2.录音的时间不能太短.否则会失败;也不能超过60秒.到了60秒会自动停止录音.

3.音频播放不能同时播放多个音频.看文档.微信小程序 播放音频文档

以上就是图文详解微信小程序中调用录音功能和音频播放的方法的详细内容,更多请关注 第一PHP社区 其它相关文章!


推荐阅读
  • 当前,众多初创企业对全栈工程师的需求日益增长,但市场中却存在大量所谓的“伪全栈工程师”,尤其是那些仅掌握了Node.js技能的前端开发人员。本文旨在深入探讨全栈工程师在现代技术生态中的真实角色与价值,澄清对这一角色的误解,并强调真正的全栈工程师应具备全面的技术栈和综合解决问题的能力。 ... [详细]
  • 手机上编写和运行PHP代码的最佳软件推荐 ... [详细]
  • 后端开发|php教程numbering,addClass,COOKIE,POST,instanceof后端开发-php教程一:php变量商场项目源码,ubuntu安装其他系统,to ... [详细]
  • 三周学会小程序第七讲:提交问题
    截止到上一讲可以支持数据库存储了,所以这一讲开始讲解怎么从小程序发布一个问题并存储到服务器端。下面简单罗列一下本讲的知识点。对了老规矩,文末附源码。对小 ... [详细]
  • 个人总结_软件工程课程——个人总结
    本文由编程笔记#小编为大家整理,主要介绍了软件工程课程——个人总结相关的知识,希望对你有一定的参考价值。前言时长4个与的软件工程实践结束。Alpha与B ... [详细]
  • 开始实现之前先上个效果图tips网络图片需先配置download域名,可通过wx.getImageInfo转为临时路径;个人习惯问题,我习 ... [详细]
  • wxParse 0.3:微信小程序中的高级 HTML 和 Markdown 富文本解析器,全面支持多级嵌套与 Emoji 表情
    wxParse 0.3 是一款专为微信小程序设计的高级富文本解析器,支持 HTML 和 Markdown 转换为 WXML 可视化格式。该组件不仅能够处理复杂的多级嵌套结构,还全面支持 Emoji 表情,极大地提升了内容展示的多样性和用户体验。 ... [详细]
  • 在微信小程序中实现外部链接跳转,可以通过微信官方提供的组件来完成。具体而言,有以下两种方法:1. 首先,可以通过创建一个新的 `` 组件来加载外部网页。这个组件允许在小程序内部嵌入一个网页视图,从而实现外部链接的展示和交互。2. 另一种方法是使用 `wx.navigateToMiniProgram` API,通过调用该接口可以跳转到其他已安装的小程序,实现更丰富的跨应用交互功能。这两种方法各有优缺点,开发者可以根据实际需求选择合适的方式。 ... [详细]
  • 微信支付授权目录配置详解及操作步骤
    在使用微信支付时,若通过WeixinJSBridge.invoke方法调用支付功能,可能会遇到“当前页面URL未注册”的错误提示,导致get_brand_wcpay_request:fail调用微信JSAPI支付失败。为解决这一问题,需要正确配置微信支付授权目录,确保支付页面的URL已成功注册。本文将详细介绍微信支付授权目录的配置步骤和注意事项,帮助开发者顺利完成支付功能的集成与调试。 ... [详细]
  • 掌握PHP框架开发与应用的核心知识点:构建高效PHP框架所需的技术与能力综述
    掌握PHP框架开发与应用的核心知识点对于构建高效PHP框架至关重要。本文综述了开发PHP框架所需的关键技术和能力,包括但不限于对PHP语言的深入理解、设计模式的应用、数据库操作、安全性措施以及性能优化等方面。对于初学者而言,熟悉主流框架如Laravel、Symfony等的实际应用场景,有助于更好地理解和掌握自定义框架开发的精髓。 ... [详细]
  • 在本文中,我们将探讨如何使用 UniApp 封装小程序 API 请求接口的最佳实践。通过创建 `request.js` 文件,定义基础 URL 并传入后端提供的 URL 作为请求参数。同时,配置请求方法(如 GET、POST)和请求头(例如包含 token 的认证信息),以实现高效、安全的 API 调用。此外,我们还将介绍如何处理请求和响应的错误,以及如何优化请求性能,确保应用在不同平台上的兼容性和稳定性。 ... [详细]
  • 如何构建并优化微信小程序页面的设计与功能
    本文将深入探讨微信小程序页面的设计与优化方法,旨在帮助开发者高效构建功能完备且用户体验良好的小程序。通过实例分析与技术详解,读者能够掌握从页面布局到功能实现的全过程,提升开发技能与应用质量。 ... [详细]
  • 本文详细介绍了如何在微信小程序中使用JavaScript实现图片上传至PHP服务器的方法。通过具体的代码示例,帮助开发者掌握从客户端选择图片、处理图片数据到服务器端接收并保存图片的完整流程。同时,文章还提供了常见问题的解决方案和优化建议,确保上传过程的高效性和稳定性。 ... [详细]
  • 本书《.NET Core 2.* 开发者指南》是面向开发者的全面学习与实践手册,涵盖了从基础到高级的各个层面。书中详细解析了 .NET Core 的核心概念,包括如何创建 .NET Core 网站,并通过视频教程直观展示操作过程。此外,还深入探讨了 Startup 类的作用、项目目录结构的组织方式以及如何在应用中使用静态文件等内容。对于希望深入了解 .NET Core 架构和开发技巧的开发者来说,本书提供了丰富的实践案例和详尽的技术指导。 ... [详细]
  • 1.木棉说分类:知识服务平台,融资情况:完成a轮融资,金额3000万人民币,投资方得盛投资。简介:木棉说是一家基于互联网大数据为女性用户提供全方位的知识服务平台,旗下已拥有2000 ... [详细]
author-avatar
王孟儒062
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有