Vue + Websocket播放PCM(base64转ArrayBuffer、 字符串转ArrayBuffer)

文章目录

  • 引言
  • I 音视频处理相关概念和API
  • II 案例:
    • 基于开源库 pcm-player方式播放
    • 借助MediaSource和Audio对象播放音频流。
    • 基于原生api AudioContext 播放操作
  • III 格式转换
    • js字符串转ArrayBuffer
    • base64 转 ArrayBuffer
  • IV 解决pcm-player分片播放问题

引言

  • 需求: 基于webscoket传输PCM数据( 单声道 8000采样率),播放和发送语音信息。
  • 技术方案:利用socket建立连接,发送文本并接收语音二进制数据,借助MediaSource和Audio对象播放音频流。

AudioContext对象,它充当音频处理的主要接口

  • 关键字: audio/webm codes pcm

I 音视频处理相关概念和API

https://blog.csdn.net/z929118967/article/details/143989799

Media Source Pipeline Model Diagram

II 案例:

基于开源库 pcm-player方式播放

本质也是基于 基于原生api AudioContext 播放操作,

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/922241.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【JavaEE进阶】SpringBoot 快速上⼿

了解Maven,并配置国内源 使⽤SpringBoot创建⼀个项⽬, 输出HelloWorld 一、Maven 1.什么是Maven 官⽅对于Maven的描述: Apache Maven is a software project management and comprehension tool. Based on the concept of a project object model (POM), Maven can man…

QT QFormLayout控件 全面详解

本系列文章全面的介绍了QT中的57种控件的使用方法以及示例,包括 Button(PushButton、toolButton、radioButton、checkBox、commandLinkButton、buttonBox)、Layouts(verticalLayout、horizontalLayout、gridLayout、formLayout)、Spacers(verticalSpacer、horizonta…

PCA算法所体现的核心数学思维

一、PCA算法的基本思想 PCA算法的核心思想是通过线性变换,将数据从原始的高维空间投影到低维空间,同时尽可能保留数据的主要变异性。这种变换是通过找到一组新的坐标轴(即主成分)来实现的,这些坐标轴是原始数据空间的…

如何解决pdf.js跨域从url动态加载pdf文档

摘要 当我们想用PDF.js从URL加载文档时,将会因遇到跨域问题而中断,且是因为会触发了PDF.js和浏览器的双重CORS block,这篇文章将会介绍:①如何禁用pdf.js的跨域?②如何绕过浏览器的CORS加载URL文件?②如何使…

C语言数据结构——详细讲解 双链表

从单链表到双链表:数据结构的演进与优化 前言一、单链表回顾二、单链表的局限性三、什么是双链表四、双链表的优势1.双向遍历2.不带头双链表的用途3.带头双链表的用途 五、双链表的操作双链表的插入操作(一)双链表的尾插操作(二&a…

Java小白成长记(创作笔记二)

目录 序言 思维导图 续 用户登录/注册 数据表 实体层 持久层 服务层 认证与授权 整合springsecurity controller注册测试 controller登录测试 跨域解决 方法 Java小白成长记(创作笔记一) Java小白成长记(创作笔记二)…

案例研究|阿特斯的JumpServer分布式部署和多组织管理实践

苏州阿特斯阳光电力科技有限公司(以下简称为阿特斯)是一家集太阳能光伏组件制造和为全球客户提供太阳能应用产品研发、设计、制造、销售的专业公司。 阿特斯集团总部位于加拿大,中国区总部位于江苏省苏州市。通过全球战略和多元化的市场布局…

20241123-四元数高阶奇异值分解-(1)

四元数高阶奇异值分解及其在彩色图像处理中的应用-(1) 📔 声明 🇨🇳 : 1️⃣ 📃 原文网址链接: 四元数高阶奇异值分解及其在彩色图像处理中的应用 - ScienceDirect 🔗 Quaternion … image processing (arxiv.org) ​ …

游戏引擎学习第20天

视频参考:https://www.bilibili.com/video/BV1VkBCYmExt 解释 off-by-one 错误 从演讲者的视角:对代码问题的剖析与修复过程 问题的起因 演讲者提到,他可能无意中在代码中造成了一个错误,这与“调试时间标记索引”有关。他发现了一个逻辑问题…

python开发之Linux

文章目录 1. 基础2. 进阶链接压缩/解压缩 文件权限用户远程操作编辑文件软件安装 1. 基础 # 查看当前目录下文件 ls# 查看当前目录 pwd# 清除界面内容 clear# 切换目录 cd# 创建目录 mkdir# 创建文件 touch 文件 vi 文件# 强制删除 rm -rf # 复制文件 cp 复制文件 复制文件路径…

Docker2:docker快速入门(部署MySQL)

欢迎来到“雪碧聊技术”CSDN博客! 在这里,您将踏入一个专注于Java开发技术的知识殿堂。无论您是Java编程的初学者,还是具有一定经验的开发者,相信我的博客都能为您提供宝贵的学习资源和实用技巧。作为您的技术向导,我将…

oracle的静态注册和动态注册

oracle的静态注册和动态注册 静态注册: 静态注册 : 指将实例的相关信息手动告知 listener 侦 听 器 , 可以使用netmgr,netca,oem 以及直接 vi listener.ora 文件来实现静态注册,在动态注册不稳定时使用,特点是:稳定&…

杰发科技AC7840——EEP中RAM的配置

sample和手册中示例代码的sram区地址定义不一样 这个在RAM中使用没有限制,根据这个表格留下足够空间即可 比如需要4096字节的eep空间,可以把RAM的地址改成E000,即E000-EFFF,共4096bytes即可。

洛谷 P1616 疯狂的采药 C语言 记忆化搜索

题目: https://www.luogu.com.cn/problem/P1616?contestId215526 完全背包问题,最后一个超出空间了。完全背包和就是无限次的拿,公式跟01背包差不多。 但是,只有当前能拿和拿不下,换下一个。注意要处理好边界条件。…

分布式 Data Warebase - 构筑 AI 时代数据基石

导读:作者以人类世界一个信息层次模型 DIKW 为出发点,引出对计算机世界(系统)处理数据过程的介绍。接着以一个民宿平台数据架构随业务发展而不断演进的过程,展示了这场信息革命中,在具体应用场景下&#xf…

zotero7 插件使用

zotero style 1、下载地址 Zotero 插件商店 | Zotero 中文社区 2、配置 在工具插件里 3、配置 style 进入高级→设置编辑器 查找 easy 设置完即可显示, 注1:easyscholar的密钥要自行申请注册,注册地址:easySchol…

使用 Elastic AI Assistant for Search 和 Azure OpenAI 实现从 0 到 60 的转变

作者:来自 Elastic Greg Crist Elasticsearch 推出了一项新功能:Elastic AI Assistant for Search。你可以将其视为 Elasticsearch 和 Kibana 开发人员的内置指南,旨在回答问题、引导你了解功能并让你的生活更轻松。在 Microsoft AI Services…

CCF认证202406-02 | 矩阵重塑(其二)

题目背景 矩阵转置操作是将矩阵的行和列交换的过程。在转置过程中,原矩阵 A 的元素 aij​ 会移动到转置后的矩阵 AT 的 aji​ 的位置。这意味着 A 的第 i 行第 j 列的元素在 AT 中成为了第 j 行第 i 列的元素。 例如,有矩阵 A 如下: A[abc…

【CSP CCF记录】201903-2第16次认证 二十四点

题目 样例1输入 10 934x3 54x5x5 7-9-98 5x6/5x4 3579 1x19-9 1x9-5/9 8/56x9 6x7-3x6 6x44/5 样例1输出 Yes No No Yes Yes No No No Yes Yes 样例1解释 思路 参考:CCF小白刷题之路---201903-2 二十四点(C/C 100分)_ccf认证小白-CSDN博客 …

docker 容器运行Ruoyi-cloud

1,linux系统安装openjdk1.8,mvn,dokcer,node,git 2,拉取代码 1)查看gitee仓库地址 2)创建/app文件夹,进入app目录 mkdir /app cd /app 3)clone代码 4)修改配置文件中nacos地址 # 修改注…