当前位置: 首页 > news >正文

微信小程序:播放音频

在小程序开发中,音频播放是一个重要的功能。本文将详细介绍小程序音频播放的相关知识点,帮助开发者更好地掌握小程序音频播放的实现方法。


一、小程序音频播放的基本流程
在小程序中,音频播放的基本流程如下:

  1. 获取音频数据:通过wx.chooseMessageSound或wx.createInnerAudioContext等方法获取到音频数据。
  2. 创建音频播放器:使用wx.createInnerAudioContext对象来创建音频播放器,设置相关属性并启动播放。
  3. 控制音频播放:通过wx.innerAudioContext对象的属性和方法来控制音频播放,如暂停、继续、停止等操作。
  4. 监听音频播放事件:通过监听audio对象的事件,可以获取到音频播放的状态、进度等信息。
    二、小程序音频播放的核心API
  5. wx.chooseMessageSound()
    该方法用于选择系统消息声音,并返回一个AudioContext对象,可以通过该对象来控制音频的播放。
  6. wx.innerAudioContext()
    该方法用于创建一个内部音频上下文对象,可以通过该对象来控制音频的播放。
  7. wx.onInnerAudioPlay() / wx.onInnerAudioEnd()
    这两个方法分别用于监听内部音频播放开始和结束事件。
  8. wx.innerAudioContext().src / wx.innerAudioContext().play() / wx.innerAudioContext().pause() / wx.innerAudioContext().stop()
    这些方法分别用于设置音频源、启动播放、暂停播放、停止播放等操作。
    三、小程序音频播放的实例代码
    以下是一个简单的示例代码,演示了如何在小程序中实现音频播放功能:

 index.wxml

<!--index.wxml-->
<scroll-view class="scrollarea" scroll-y type="list"><view class="container"><button bind:tap="bindPlay">播放</button><button bind:tap="bindPause">暂停</button><button bind:tap="bindStop">停止</button><button bind:tap="bindDestroy">重播</button></view>
</scroll-view>

index.js

// index.js
Page({data: {innerAudioContext:{}},onLoad(){this.innerAudioContext = wx.createInnerAudioContext({useWebAudioImplement: false // 是否使用 WebAudio 作为底层音频驱动,默认关闭。对于短音频、播放频繁的音频建议开启此选项,开启后将获得更优的性能表现。由于开启此选项后也会带来一定的内存增长,因此对于长音频建议关闭此选项})this.innerAudioContext.src = 'https://hanyu-poem-mp3.cdn.bcebos.com/38a52978fb6f4cfd8bcc25fc2db2c0fa.mp3'},bindPlay(){this.innerAudioContext.play() // 播放},bindPause(){this.innerAudioContext.pause() // 暂停},bindStop(){this.innerAudioContext.stop() // 停止},bindDestroy(){//InnerAudioContext 音频资源不会自动释放,因此如果不再需要使用音频,请及时调用 this.innerAudioContext.destroy() // 释放音频资源,避免内存泄漏。}
})

在data中定义了一个audioUrl变量是音频文件的URL地址。然后在onLoad方法中,我们创建了一个内部音频上下文对象audioContext,并设置其音频源为audioUrl。接着,我们通过监听audioContext的onPlay和onError事件,分别获取到音频开始播放和播放错误的信息。最后,我们调用audioContext的play方法启动音频的播放。 

    结尾:样例小程序二维码,自己做的一个免费好用的排班小程序

相关文章:

微信小程序:播放音频

在小程序开发中&#xff0c;音频播放是一个重要的功能。本文将详细介绍小程序音频播放的相关知识点&#xff0c;帮助开发者更好地掌握小程序音频播放的实现方法。 一、小程序音频播放的基本流程 在小程序中&#xff0c;音频播放的基本流程如下&#xff1a; 获取音频数据&#…...

Ubuntu安装K8S

第一步&#xff1a; 安装docker Install Docker #注意docker是早期的名称已经过时了&#xff0c;因此请使用如下命令&#xff0c;一步到位安装docker-ce。 第二步&#xff1a;设置K8S源&#xff1a; &#xff08;大陆使用aliyun源&#xff0c;大陆外使用google源&#xff09;…...

独立同分布时,联合概率密度函数等于边缘概率密度函数乘积

在概率论中&#xff0c;独立同分布&#xff08;i.i.d.&#xff09;指的是多个随机变量既独立又服从相同的概率分布。对于一组随机变量 (X_1, X_2, \dots, X_n)&#xff0c;若它们是独立同分布的&#xff0c;那么它们的联合概率密度函数 (p(x_1, x_2, \dots, x_n)) 就可以表示为…...

半导体数据分析: 玩转WM-811K Wafermap 数据集(三) AI 机器学习

前面我们已经通过两篇文章&#xff0c;一起熟悉了WM-811K Wafermap 数据集&#xff0c;并对其中的一些数据进行了调用&#xff0c;生成了一些统计信息和图片。今天我们接着继续往前走。 半导体数据分析&#xff1a; 玩转WM-811K Wafermap 数据集&#xff08;二&#xff09; AI…...

【.net core】【sqlsugar】时间查询示例

1、时间包含查询示例 //model.TimeInterval为时间区间参数&#xff0c;参数格式为2024-01-01~2025-01-01 //query为当前查询的语句内容 //为当前查询语句增加创建时间模糊搜索查询条件 query query.Where(a > ((DateTime)a.F_CreatorTime).ToString("yyyy-MM-dd HH:m…...

Kotlin 协程基础十 —— 协作、互斥锁与共享变量

Kotlin 协程基础系列&#xff1a; Kotlin 协程基础一 —— 总体知识概述 Kotlin 协程基础二 —— 结构化并发&#xff08;一&#xff09; Kotlin 协程基础三 —— 结构化并发&#xff08;二&#xff09; Kotlin 协程基础四 —— CoroutineScope 与 CoroutineContext Kotlin 协程…...

Java中网络编程的学习

目录 网络编程概述 网络模型 网络通信三要素: IP 端口号 通信协议 IP地址&#xff08;Internet Protocol Address&#xff09; 端口号 网络通信协议 TCP 三次握手 四次挥手 UDP TCP编程 客户端Socket的工作过程包含以下四个基本的步骤&#xff1a; 服务器程序…...

[计算机网络]一. 计算机网络概论第一部分

作者申明&#xff1a;作者所有文章借助了各个渠道的图片视频以及资料&#xff0c;在此致谢。作者所有文章不用于盈利&#xff0c;只是用于个人学习。 1.0推荐动画 【网络】半小时看懂<计算机网络>_哔哩哔哩_bilibili 1.1计算机网络在信息时代的作用 在当今信息时代&…...

【0393】Postgres内核 checkpointer process ③ 构建 WAL records 工作缓存区

1. 初始化 ThisTimeLineID、RedoRecPtr 函数 InitXLOGAccess() 内部会初始化 ThisTimeLineID、wal_segment_size、doPageWrites 和 RedoRecPtr 等全局变量。 下面是这四个变量初始化前的值: (gdb) p ThisTimeLineID $125 = 0 (gdb) p wal_segment_size $126 = 16777216 (gdb…...

正则表达式基础知识及grep、sed、awk常用命令

文章目录 前言一、正则表达式元字符和特性1. 字符匹配2. 量词3. 字符类4. 边界匹配5. 分词和捕获6. 特殊字符7. 位置锚定 二、grep常用参数1. -n额外输出行号2. -v 排除匹配的行3. -E 支持扩展正则匹配4. -e进行多规则匹配搜索5. -R 递归匹配目录中的文件内容6. -r递归地搜索目…...

redhat安装docker 24.0.7

1、下载docker镜像包 wget https://download.docker.com/linux/static/stable/x86_64/docker-24.0.7.tgz 2、解压 tar -xvf docker-24.0.7.tgz 3、解压的docker文件夹全部移动至/usr/bin目录 cd docker cp -p docker/* /usr/bin 4、注册服务 vi /usr/lib/systemd/syste…...

【excel】VBA简介(Visual Basic for Applications)

文章目录 一、基本概念二、语法2.1 数据类型2.11 基本数据类型2.12 常量2.13 数组 2.2 控制语句2.21 条件语句2.22 循环语句2.23 错误处理&#xff1a;On Error2.24 逻辑运算 2.3 其它语句2.31 注释2.32 with语句 2.4 表达式2.41 常见表达式类型2.42 表达式的优先级 2.5 VBA 的…...

【大厂面试AI算法题中的知识点】方向涉及:ML/DL/CV/NLP/大数据...本篇介绍为什么self-attention可以堆叠多层,这有什么作用?

【大厂面试AI算法题中的知识点】方向涉及&#xff1a;ML/DL/CV/NLP/大数据…本篇介绍为什么self-attention可以堆叠多层&#xff0c;这有什么作用&#xff1f; 【大厂面试AI算法题中的知识点】方向涉及&#xff1a;ML/DL/CV/NLP/大数据…本篇介绍为什么self-attention可以堆叠…...

NanoKVM简单开箱测评和拆解,让普通电脑实现BMC/IPMI远程管理功能

Sipeed推出了NanoKVM&#xff0c;简直是没有BMC的台式机和工作站的福音。有了这个就可以轻松实现以往服务器才有的远程管理功能。 NanoKVM 简介 Lichee NanoKVM 是基于 LicheeRV Nano 的 IP-KVM 产品&#xff0c;继承了 LicheeRV Nano 的极致体积 和 强大功能。 NanoKVM 包含…...

【Idea】编译Spring源码 read timeout 问题

Idea现在是大家工作中用的比较多的开发工具&#xff0c;尤其是做java开发的&#xff0c;那么做java开发&#xff0c;了解spring框架源码是提高自己技能水平的一个方式&#xff0c;所以会从spring 官网下载源码&#xff0c;导入到 Idea 工具并编译&#xff0c;但是发现build的时…...

VSCode的配置与使用(C/C++)

从0开始教你在vscode调试一个C文件 一.首先是配置你的编译环境&#xff0c;添加到环境变量&#xff08;默认你是全新的电脑&#xff0c;没有安装vs2019之类的&#xff09; 原因&#xff1a;因为相比于vs2019&#xff0c;vscode只是个代码编辑器&#xff0c;相当于一个彩色的、…...

SpringMVC (1)

目录 1. 什么是Spring Web MVC 1.1 MVC的定义 1.2 什么是Spring MVC 1.3 Spring Boot 1.3.1 创建一个Spring Boot项目 1.3.2 Spring Boot和Spring MVC之间的关系 2. 学习Spring MVC 2.1 SpringBoot 启动类 2.2 建立连接 1. 什么是Spring Web MVC 1.1 MVC的定义 MVC 是…...

本地部署大模型—MiniCPM-V 2.0: 具备领先OCR和理解能力的高效端侧多模态大模型

MiniCPM-V 2.0: 具备领先OCR和理解能力的高效端侧多模态大模型 简介 MiniCPM 系列的最新多模态版本 MiniCPM-V 2.0。该模型基于 [MiniCPM 2.4B和 SigLip-400M 构建,共拥有 2.8B 参数。MiniCPM-V 2.0 具有领先的光学字符识别(OCR)和多模态理解能力。该模型在综合性 OCR 能力…...

国产linux系统(银河麒麟,统信uos)使用 PageOffice 实现后台批量生成PDF文档

PageOffice 国产版 &#xff1a;支持信创系统&#xff0c;支持银河麒麟V10和统信UOS&#xff0c;支持X86&#xff08;intel、兆芯、海光等&#xff09;、ARM&#xff08;飞腾、鲲鹏、麒麟等&#xff09;、龙芯&#xff08;LoogArch&#xff09;芯片架构。 PageOffice 版本&…...

Python 扫描枪读取发票数据导入Excel

财务需要一个扫描枪扫描发票文件&#xff0c;并将主要信息录入Excel 的功能。 文件中sheet表的列名称&#xff0c;依次为&#xff1a;发票编号、发票编码、日期、金额、工号、扫描日期。 扫描的时候&#xff0c;Excel 文件需要关闭&#xff0c;否则会报错。 import openpyxl …...

java_网络服务相关_gateway_nacos_feign区别联系

1. spring-cloud-starter-gateway 作用&#xff1a;作为微服务架构的网关&#xff0c;统一入口&#xff0c;处理所有外部请求。 核心能力&#xff1a; 路由转发&#xff08;基于路径、服务名等&#xff09;过滤器&#xff08;鉴权、限流、日志、Header 处理&#xff09;支持负…...

java 实现excel文件转pdf | 无水印 | 无限制

文章目录 目录 文章目录 前言 1.项目远程仓库配置 2.pom文件引入相关依赖 3.代码破解 二、Excel转PDF 1.代码实现 2.Aspose.License.xml 授权文件 总结 前言 java处理excel转pdf一直没找到什么好用的免费jar包工具,自己手写的难度,恐怕高级程序员花费一年的事件,也…...

苍穹外卖--缓存菜品

1.问题说明 用户端小程序展示的菜品数据都是通过查询数据库获得&#xff0c;如果用户端访问量比较大&#xff0c;数据库访问压力随之增大 2.实现思路 通过Redis来缓存菜品数据&#xff0c;减少数据库查询操作。 缓存逻辑分析&#xff1a; ①每个分类下的菜品保持一份缓存数据…...

相机从app启动流程

一、流程框架图 二、具体流程分析 1、得到cameralist和对应的静态信息 目录如下: 重点代码分析: 启动相机前,先要通过getCameraIdList获取camera的个数以及id,然后可以通过getCameraCharacteristics获取对应id camera的capabilities(静态信息)进行一些openCamera前的…...

AI编程--插件对比分析:CodeRider、GitHub Copilot及其他

AI编程插件对比分析&#xff1a;CodeRider、GitHub Copilot及其他 随着人工智能技术的快速发展&#xff0c;AI编程插件已成为提升开发者生产力的重要工具。CodeRider和GitHub Copilot作为市场上的领先者&#xff0c;分别以其独特的特性和生态系统吸引了大量开发者。本文将从功…...

【学习笔记】深入理解Java虚拟机学习笔记——第4章 虚拟机性能监控,故障处理工具

第2章 虚拟机性能监控&#xff0c;故障处理工具 4.1 概述 略 4.2 基础故障处理工具 4.2.1 jps:虚拟机进程状况工具 命令&#xff1a;jps [options] [hostid] 功能&#xff1a;本地虚拟机进程显示进程ID&#xff08;与ps相同&#xff09;&#xff0c;可同时显示主类&#x…...

Maven 概述、安装、配置、仓库、私服详解

目录 1、Maven 概述 1.1 Maven 的定义 1.2 Maven 解决的问题 1.3 Maven 的核心特性与优势 2、Maven 安装 2.1 下载 Maven 2.2 安装配置 Maven 2.3 测试安装 2.4 修改 Maven 本地仓库的默认路径 3、Maven 配置 3.1 配置本地仓库 3.2 配置 JDK 3.3 IDEA 配置本地 Ma…...

嵌入式学习笔记DAY33(网络编程——TCP)

一、网络架构 C/S &#xff08;client/server 客户端/服务器&#xff09;&#xff1a;由客户端和服务器端两个部分组成。客户端通常是用户使用的应用程序&#xff0c;负责提供用户界面和交互逻辑 &#xff0c;接收用户输入&#xff0c;向服务器发送请求&#xff0c;并展示服务…...

站群服务器的应用场景都有哪些?

站群服务器主要是为了多个网站的托管和管理所设计的&#xff0c;可以通过集中管理和高效资源的分配&#xff0c;来支持多个独立的网站同时运行&#xff0c;让每一个网站都可以分配到独立的IP地址&#xff0c;避免出现IP关联的风险&#xff0c;用户还可以通过控制面板进行管理功…...

MySQL:分区的基本使用

目录 一、什么是分区二、有什么作用三、分类四、创建分区五、删除分区 一、什么是分区 MySQL 分区&#xff08;Partitioning&#xff09;是一种将单张表的数据逻辑上拆分成多个物理部分的技术。这些物理部分&#xff08;分区&#xff09;可以独立存储、管理和优化&#xff0c;…...