web前端实时音频播放并绘制波形

这篇具有很好参考价值的文章主要介绍了web前端实时音频播放并绘制波形。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

初始

最新项目需要用到拉取实时声音流数据播放声音以及显示对应的波形图。如果是声音文件我们可以用 wavesurfer.js这个框架很轻松的绘制波形,但是实时声音怎么转换呢,以下是我的解决方案
web前端实时音频播放并绘制波形

1.后端通过websocket推流

后端需要将数据转换成PCM格式
web前端实时音频播放并绘制波形

2.前端实现

我们用到下面2个库:
1.pcm-player (播放声音)
2.recorder-core (绘制波形)

安装:

npm install pcm-player
npm install recorder-core

1.首先我们先封装websocket(网上也有很多教程),直接上代码

var ws = null
let lockReconnect = false;
/**
 * @param {*} path ws url
 * @param {*} callback 数据处理回调
 * @param {*} isHandleData 是否处理转换数据
 * @returns ws
 */
const websocket = (path, callback, isHandleData = false) => {
    cancel();//取消上一次连接
    ws = new WebSocket(path);
    ws.binaryType = "arraybuffer"
    // 建立连接
    ws.onopen = (event) => {
        console.log('websocket 建立连接');
        // 连接关闭
        ws.onclose = (event) => {
            console.log('websocket 连接断开,重新连接');
            reconnect(path, callback);
        };
        // 接收到消息
        ws.onmessage = (event) => {
            const data = handleData(event, isHandleData);
            if (callback) callback(data)
        };
    };
    ws.onerror = (event) => {
        console.log('websocket 连接失败,重新连接');
        reconnect(path, callback);
    };
    return ws;
}
// 重新连接
const reconnect = (path, callback) => {
    if (lockReconnect) {
        return;
    }
    lockReconnect = true;
    setTimeout(function () {
        console.log("重新链接…")
        lockReconnect = false;
        websocket(path, callback)
    }, 2000);
}

// 处理返回数据
const handleData = (event, isHandleData) => {
    const data = isHandleData ? JSON.parse(event.data) : event
    return data;
}
// 取消连接 清除ws实例
const cancel = () => {
    if (ws) {
        ws.onclose = () => { }
        ws?.close()
    }
    ws = null
}

export default websocket

2.在vue中使用完整代码文章来源地址https://www.toymoban.com/news/detail-514411.html

<template>
  <div id="wave_audio"></div>
</template>

<script>
import Recorder from 'recorder-core'
import PCMPlayer from 'pcm-player'
//需要使用到的音频格式编码引擎的js文件统统加载进来
import 'recorder-core/src/engine/mp3'
import 'recorder-core/src/engine/mp3-engine'
//以上三个也可以合并使用压缩好的recorder.xxx.min.js
//比如 import Recorder from 'recorder-core/recorder.mp3.min' //已包含recorder-core和mp3格式支持
//可选的扩展支持项
import 'recorder-core/src/extensions/wavesurfer.view'
import websocket from './websocket'
var player = null
var wave = null
export default {
  mounted() {
    this.initPlay()
    this.initWave()
    this.initWebsocket(
      'ws://192.168.8.210:8877/live?url=rtmp://139.224.194.14:10085/hls/wrpYcD27g?sign=wrtY5D27gz&&&ffmpeg=true'
    )
  },
  methods: {
    initPlay() {
      player = new PCMPlayer({
        encoding: '16bitInt', //编码 可能的值 8bitInt / 16bitInt / 32bitInt / 32bitFloat 默认值:16bitInt
        channels: 1, // PCM 数据中的通道数
        sampleRate: 32000, // PCM 数据的采样率
        flushTime: 2000, //  以毫秒为单位播放的 PCM 数据的刷新间隔。默认 1000ms
      })
    },
    initWave() {
      const waveOption = {
        elem: '#wave_audio',
        scale: 2, //缩放系数,应为正整数,使用2(3? no!)倍宽高进行绘制,避免移动端绘制模糊
        fps: 50, //绘制帧率,不可过高,50-60fps运动性质动画明显会流畅舒适,实际显示帧率达不到这个值也并无太大影响
        duration: 3500, //当前视图窗口内最大绘制的波形的持续时间,此处决定了移动速率
        direction: 1, //波形前进方向,取值:1由左往右,-1由右往左
        position: 0, //绘制位置,取值-1到1,-1为最底下,0为中间,1为最顶上,小数为百分比
        centerHeight: 1, //中线基础粗细,如果为0不绘制中线,position=±1时应当设为0
        //波形颜色配置:[位置,css颜色,...] 位置: 取值0.0-1.0之间
        linear: [0, 'rgba(14, 224, 238, 1)', 1, 'rgba(14, 224, 238, .6)'],
        centerColor: 'rgba(14, 224, 238, 1)', //中线css颜色,留空取波形第一个渐变颜色
      }
      wave = Recorder.WaveSurferView(waveOption)
    },
    initWebsocket(url) {
      websocket(url, this.handle)
    },
    handle(event) {
      const dataAudio = new Uint8Array(event.data)
      player && player.feed(dataAudio) // 播放声音
      const data = new Uint16Array(event.data)
      wave && wave.input(data, 20, 32000) // 添加波形数据
    },
    destroyPlay() {
      player && player.destroy()
      player = null
    },
  },
  beforeDestroy() {
    this.destroyPlay()
  },
}
</script>

<style lang="less" scoped>
#wave_audio {
  width: 100%;
  height: 100%;
}
</style>

到了这里,关于web前端实时音频播放并绘制波形的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端-如何用echarts绘制含有多个分层的波形图

    先展示一下实际的效果图 用户选择完需要的波形参数字段之后,页面开始渲染图表,有几个参数就要渲染几个grid,也就是几行波形。 拿到所选的参数数据之后 1.首先是给横坐标轴的里程-数据注入 2.修改tooltip(跟着竖线走的卡片弹窗)里面的弹出窗的显示,需要返回html模板

    2024年02月01日
    浏览(47)
  • 定时音频数据采集并发送websocket实时播放

    一 定时音频数据采集并发送websocket实时播放 Recorder.js

    2024年02月02日
    浏览(43)
  • 前端实现页面自动播放音频方法

    前提 需要页面自动播放一段报警声音,将audio标签的 autoplay 属性设置为true,发现自动播放失败,并出现如下报错: Uncaught (in promise) DOMException: play() failed because the user didn’t interact with the document first. 为什么要禁止自动播放音频与视频 网页加载完成后立即播放音频(或带有音

    2024年02月09日
    浏览(47)
  • web audio api 实现音频播放

    最近被选中做音视频,挺幸运的吧,一直在接触新的项目,每次都能被分到新的项目组,干好多费头发的事情😂 上周五肝到12点半,总算是把音频编辑上了线 总结了一下,决定写一写,也盘点一下遇到的坑 web audio API是 HTML5新增的API,提供了在web上控制音频的一个有效通用的

    2023年04月09日
    浏览(54)
  • 用selenium爬取直播信息,前端音频播放器

    #保存数据的函数 def save_data(self,data_list,i): #在当前目录下将数据存为txt文件 with open(‘./douyu.txt’,‘w’,encoding=‘utf-8’) as fp: for data in data_list: data = str(data) fp.write(data+‘n’) print(“第%d页保存完成!” % i) (2)保存为json文件 #保存数据的函数 def save_data(self,data_list,i): with op

    2024年04月16日
    浏览(49)
  • 【JavaScript】后端返回的二进制流音频数据或本地音频资源,前端如何播放?

    如果我们要使用本地的音频资源,在 vue3 中那么我们需要对资源的地址做一下处理 后端返回二进制流音频数据,怎么让其可播放 前端播放二进制语音流

    2024年02月03日
    浏览(64)
  • 音频播放器Web页面代码实例(基于HTML5)

    音频播放器Web页面代码实例(基于HTML5):   特别需要注意的点:     如果上传文件时设置的是默认转码方式,所有的文件都会转码为视频文件,使用音频播放器播放视频文件时,只会播放声音,没有图像。     如果上传文件时设置了\\\"源文件播放\\\",平台不会对源文件进行

    2024年02月16日
    浏览(39)
  • vue前端获取/切换麦克风,播放采集音频和采集音量大小

    使用时确保你有如下依赖且版本为Vue2,终端里面运行 重要代码:audio: { deviceId: this.form.chooseMicDeviceId },将上面选的麦克风放到getUserMedia中,即可启用用户自己选择的麦克风 在sendData中可以把数据流传给后端,可以播放/下载采集到的数据流,也可以将数据流转换成file传给后端

    2024年02月08日
    浏览(46)
  • 【ESP32音视频传输】②通过I2S采集SPH0645麦克风音频数据并上传到服务端实时播放

    提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 本文章基于Arduino ESP32 2.07版本,因为2.04版本开始I2S驱动被更改了,所以相同代码可能效果不太同 本文主要参考了:https://atomic14.com/2020/09/12/esp32-audio-input.html ESP32有多种方式从外置麦克风中读取数据:

    2024年02月11日
    浏览(50)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包