微信小程序音频播放

// 开启播放音频
startAudio(){
const innerAudioContext = uni.createInnerAudioContext();//创建并返回内部 audio
innerAudioContext.autoplay = false;//不自动播放
innerAudioContext.src =this.pageInfoBack.leaveReason;//音频的地址,不支持本地路径
innerAudioContext.obeyMuteSwitch=false;//即使用户打开了静音开关,也能继续发出声音
let self=this;
innerAudioContext.play(); // 点击按钮音频开始播放事件
self.isPlay=true;//显示播放图标
innerAudioContext.onEnded(res=>{
console.log("播放结束",res)
self.isPlay=false;
})
innerAudioContext.onError(err=>{
self.isPlay=false;
})
},

微信小程序音频播放的更多相关文章

  1. 微信小程序音频播放 InnerAudioContext 的用法

    今天项目上涉及到了微信小程序播放音频功能,所以今天跟着一些教程做了个简单的播放器 1.实现思路 刚开始想着有没有现成的组件可以直接用,找到了微信的媒体组件 audio,奈何看着 1.6.0版本开始,该 ...

  2. 微信小程序——音频播放器

    先来个效果图韵下味: 需求: 音频的播放,暂停,中间按钮状态的变化,播放时实时更新播放进度: 前进15s,后退15s: 进度条拖动. 一开始想着这3个功能应该挺简单的.不就是播放,暂停,前进,后退么~ ...

  3. 微信小程序 - 音频播放(1.2版本和1.2版本之后)

    不多说了,直接贴code // 1.2版本以后便不在维护 wx.getBackgroundAudioManager({ success:function(res){ var status =res.s ...

  4. 微信小程序音频背景播放

    由于微信小程序官方将音频的样式固定死了,往往再工作中和UI设计师设计出来的样式不符,故一般都采用背景音频播放来实现自定义的UI样式的音频播放,即使用官网API提供的BackgroundAudioMan ...

  5. 微信小程序音乐播放

    最近在写一个艾美食艾音乐的微信小程序,其中有用到音乐播放的功能,基本播放切换功能已经实现,但是在反复切换歌曲.重新进入歌曲以及单曲循环.列表循环的测试过程中还是发生了bug,特此写一篇文章,捋一下思路 ...

  6. 微信小程序音乐播放器

    写在前面 1.入门几天小白的作品,希望为您有帮助,有好的意见或简易烦请赐教 2.微信小程序审核音乐类别已经下架,想要发布选题需慎重.附一个参考链接,感谢https://www.hishop.com.c ...

  7. 微信小程序音频长度获取的问题

    小程序推荐使用wx.createInnerAudioContext()创建的innerAudioContext,我们也通过这个接口创建音频.音频的长度可以通过属性获取: 但是,给innerAudioC ...

  8. 微信小程序音乐播放器组件

    wxml <image bindtap="click" src="{{isPlay?'/images/':'/images/'}}"/> JS Pa ...

  9. 微信小程序---音乐播放和控制

    1.效果图如下: 2.代码如下: //index.js //获取应用实例 var app = getApp() Page({ data: { motto: 'Hello World', userInf ...

  10. 微信小程序(9)--音频及视频弹幕

    记录微信小程序音频及视频弹幕播放效果. 1.audio <!-- audio.wxml --> <audio poster="{{poster}}" name=& ...

随机推荐

  1. ARC121D 1 or 2

    ARC121D 1 or 2 诈骗题. 思路 吃一个糖的操作可以看做是和一个 \(a_i\) 为 0 的糖一起吃. 可以枚举有多少个糖单独吃来确定要增加多少个 0. 问题变为每次吃两颗糖. 根据人类直 ...

  2. Nuxt.js 应用中的 vite:compiled 事件钩子

    title: Nuxt.js 应用中的 vite:compiled 事件钩子 date: 2024/11/19 updated: 2024/11/19 author: cmdragon excerpt ...

  3. 解读vue的webpack.base.conf.js配置

    'use strict' // 引入nodejs路径模块 const path = require('path') // 引入utils工具模块,utils主要用来处理css-loader和vue-s ...

  4. 进程管理工具之PM2

    Github地址 https://github.com/Unitech/pm2 官方文档 http://pm2.keymetrics.io/docs/usage/quick-start/ npm安装 ...

  5. onlyoffice

    https://helpcenter.onlyoffice.com/installation/docs-enterprise-install-centos.aspx?_ga=2.51626159.76 ...

  6. nginx 访问 nodejs 慢的问题

    1.问题现象 通过nginx 访问 nodejs 访问特别慢.但是通过nodejs 直接访问速度很快响应. 2.日志错误 upstream timed out (10060: A connection ...

  7. uniapp 画布

    1.前言 uniapp中的canvas与HTML中的canvas用法并不同,他的使用文档请参考微信小程序画布 2.基本使用 1.准备canvas容器,并为其设置canvas-id和宽高(为了兼容H5, ...

  8. Word转Pdf方式

    最近在工作中需要将word文件转换为pdf文件,找了很多种方式.以下简单列一下: 一.Aspose-words(推荐) 使用Aspose比较方便,转换之后格式这些基本没什么问题.我也使用的此种方式.正 ...

  9. 鸿蒙UI开发快速入门 —— part05:组件的样式复用

    1. 为什么要样式复用? 如果每个组件的样式都需要单独设置,在开发过程中会出现大量代码在进行重复样式设置,虽然可以复制粘贴,但为了代码简洁性和后续方便维护,样式的复用就很有必要了. 为此,鸿蒙推出了可 ...

  10. Redis应用—4.在库存里的应用

    大纲 1.库存模块设计 2.库存缓存分片和渐进式同步方案 3.基于缓存分片的下单库存扣减方案 4.商品库存设置流程与异步落库的实现 6.库存入库时"缓存分片写入 + 渐进式写入 + 写入失败 ...