uniapp 微信语音播放功能(整理)

简介: uniapp 微信语音播放功能(整理)

1、在你的小程序中,加上可调用插件,设置-第三方设置-添加插件:微信同声传译。


2、把源码视图 中的appid替换成你自己的appid(点击详情-可查看appid)

data(){
  return{
    playN: 0,
  }
},
onShow(){
  this.play();  //语音
},
methods:(){
  // 播放语音
  play() {
    if(this.$.get_data("logInData") != true){ //判断了下是否登录状态
      return false
    }
    this.$.ajax("GET", "/api/mech/getVoiceMessage", {}, (res) => {
      if (res.code == 1000) {
        var _this = this;
        // var data = [80];
        var data = res.data;
        var numText = '';
        // var num = 1;
        if (data != undefined && _this.playN < data.length) {
          numText = data[_this.playN];
          // let text = "微信收款 800 元" // 真实环境替换为以后端返回文本(数字金额前后加一个空格,播报时就会顿一下)
          // let text = "微信收款 " + numText + "元";
          let text = numText;
          //直接调用全局封装好的方法
          _this.WechatSI.textToSpeech({
            lang: "zh_CN",
            tts: true,
            content: text,
            success: function(res) {
              console.log("succ tts", res.filename) //MP3录音文件
              _this.ScanAudio(res.filename);
              _this.playN++;
              console.log("playN", _this.playN);
              setTimeout(function() {
                _this.play();
              }, 6000);
            },
            fail: function(res) {
              console.log("fail tts", res)
            }
          })
        } else {
          setTimeout(function() {
            _this.playN = 0;
            _this.play();
          }, 6000);
        }
      }
    });
  },
},
相关文章
|
6天前
|
移动开发 JavaScript 前端开发
【Uniapp 专栏】Uniapp 与 Flutter 的功能特点对比
【5月更文挑战第15天】Uniapp 和 Flutter 是跨平台开发的热门框架。Uniapp 以其强大的跨平台兼容性和基于 Vue.js 的易学性著称,适合快速开发适用于 iOS、Android 和 H5 的应用。其丰富的组件生态简化了功能集成。然而,在复杂场景下,性能可能不及原生。Flutter 则以其全新渲染引擎实现流畅界面和高度自定义,性能接近原生,但学习成本较高,需处理特定平台适配。适用于高要求的项目。两者各有优势,选择应考虑项目需求、技术储备和开发周期。
【Uniapp 专栏】Uniapp 与 Flutter 的功能特点对比
|
6天前
|
开发框架 前端开发 开发者
【Uniapp 专栏】Uniapp 的状态管理功能深度解析
【5月更文挑战第13天】Uniapp 的状态管理对于构建复杂跨平台应用至关重要,它包括全局变量、Vuex 风格管理。核心概念有 State、Actions 和 Mutations。通过状态定义、动作设计和突变管理,提高开发效率和代码可维护性。实际案例和与其他框架比较显示了 Uniapp 的优势。理解并有效利用状态管理,能提升应用质量和开发效率。
【Uniapp 专栏】Uniapp 的状态管理功能深度解析
|
5天前
|
移动开发 前端开发 JavaScript
uniapp中IO模块(管理本地文件系统)的常用功能封装
uniapp中IO模块(管理本地文件系统)的常用功能封装
|
6天前
|
存储 开发框架 自然语言处理
【Uniapp 专栏】Uniapp 的多语言支持功能详解
【5月更文挑战第14天】Uniapp是一款跨平台开发框架,提供强大多语言支持,助力开发者轻松构建支持多种语言的应用,提升用户体验和市场拓展。其特点包括灵活的语言管理、跨平台一致性。通过语言文件存储内容,切换机制让用户自由切换。注重翻译准确性和文化适应性,集成到页面和组件中,同时关注性能优化。面对翻译不一致和更新及时性等问题,Uniapp将持续发展和完善,为全球化应用开发提供强有力支持。
【Uniapp 专栏】Uniapp 的多语言支持功能详解
|
6天前
|
存储 开发框架 安全
【Uniapp 专栏】探索 Uniapp 的本地存储功能特点
【5月更文挑战第14天】Uniapp的本地存储功能是其跨平台开发的强大优势,提供数据持久化的存储、读取,支持多种数据类型。其特点是简单易用、跨平台一致且有一定安全性。通过键值对存储和容量管理,适应不同应用场景,如用户登录信息存储和应用配置保存。同时,注意性能优化、数据清理和安全保护。与其他框架比较,Uniapp有独特优势,并将持续发展以满足复杂需求。开发者应根据业务需求设计存储策略,确保数据安全高效使用。
【Uniapp 专栏】探索 Uniapp 的本地存储功能特点
|
6天前
|
缓存 开发框架 安全
【Uniapp 专栏】详解 Uniapp 的网络请求功能特性
【5月更文挑战第13天】Uniapp是一款跨平台开发框架,提供便捷的网络请求功能,支持HTTP/HTTPS协议及GET/POST等多种请求方法。它允许设置请求参数、处理响应数据,并有超时时间、缓存策略及错误处理机制。还能与状态管理、页面交互结合,确保数据安全并进行性能优化。通过案例和比较,展现了Uniapp在网络请求上的优势,为开发高质量移动应用奠定基础。理解和掌握这些特性对于创建出色应用体验至关重要。
【Uniapp 专栏】详解 Uniapp 的网络请求功能特性
|
6天前
|
小程序
微信小程序用户登陆和获取用户信息功能实现
微信小程序用户登陆和获取用户信息功能实现
16 0
|
6天前
|
小程序
uniapp-微信小程序-上拉和下拉触底刷新
uniapp-微信小程序-上拉和下拉触底刷新
14 0
|
6天前
|
Web App开发 数据采集 移动开发
开发uniapp过程中对app、微信小程序与h5的webview调试
开发uniapp过程中对app、微信小程序与h5的webview调试
16 1
|
6天前
|
移动开发 开发框架 小程序
UniApp与微信小程序介绍及区别
UniApp与微信小程序介绍及区别
31 0

热门文章

最新文章