[网络协议] python与html的websocket音频通讯2

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> 网络协议 -> python与html的websocket音频通讯2 -> 正文阅读

[网络协议]python与html的websocket音频通讯2

这一遍，写网页端传声音到python端走websocket。

不二话，上代码打样。
python音频服务端

#复制粘贴即可，细节自己百度，主要是跑通程序
import base64
import asyncio
import websockets
import cv2
import math
import np
import pyaudio
import wave
import time
import threading
import matplotlib.pyplot as plt

chunk = 4096# Record in chunks of 1024 samples
sample_format = pyaudio.paInt16 # 16 bits per sample
channels = 2 #两声道
fs = 44100  # Record at 44100 samples per second
p = pyaudio.PyAudio()  # 创建音频对象

#image = cv2.imread("1.png")#image :是返回提取到的图片的值
#麦克风
micstream = p.open(format=sample_format,#音频输入流创建
                   channels=channels,
                   rate=fs,
                   frames_per_buffer=chunk,
                   input=True)
#喇叭
stream2 = p.open(format=sample_format,#音频输出流创建
                channels=channels,
                rate=fs,
                frames_per_buffer=chunk,
                output=True)


async def echo(websocket, path):
    print(websockets.serve)
    async for message in websocket:
        stream2.write(message)#播放 
        #m=micstream.read(chunk)#录音
        y=[]
        for i in range(1):#这里和上一篇数字不一样请注意。15次录音会阻塞线程。需要开新线程处理。范例用1次可忽略阻塞影响。
            m=micstream.read(chunk)
            y.append(m)
            
        if len(message )>1:await websocket.send(y)#发送录音

        
        
async def main():
    # start a websocket server
    async with websockets.serve(echo, "192.168.1.102", 8765):
        await asyncio.Future()  # run forever

asyncio.run(main())

html网页端，上代码
点击设备授权就开始跑代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <title>音量</title>
    <style>
	
        
		
    </style>
</head>
<body>
<div id="status">预备开始</div>
<audio id="video" src=""></audio>
<a onclick='aa()'>开始</a> <a onclick='bb()'>结束</a>
<script type="text/javascript">
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
            // 获取用户的 media 信息
             navigator.mediaDevices.getUserMedia({
	video: false,                                   
    audio: {
        sampleRate: 44100, // 采样率
        channelCount: 2,   // 声道
        volume: 1.0,        // 音量
		sampleBits:16
		}
    }).then((stream) => {
	var audioContext= new AudioContext();
	const socket = new WebSocket('ws://192.168.1.102:8765');
                // 将麦克风的声音输入这个对象
                mediaStreamSource = audioContext.createMediaStreamSource(stream);
                // 创建一个音频分析对象，采样的缓冲区大小为4096，输入和输出都是单声道
                scriptProcessor = audioContext.createScriptProcessor(4096,2,2);
                // 将该分析对象与麦克风音频进行连接
                mediaStreamSource.connect(scriptProcessor);
                // 此举无甚效果，仅仅是因为解决 Chrome 自身的 bug
                scriptProcessor.connect(audioContext.destination);
				//scriptProcessor.start();
                // 开始处理音频
				
				var c=[]
				var i2=0;
                scriptProcessor.onaudioprocess = function(e) {
                    // 获得缓冲区的输入音频，转换为包含了PCM通道数据的32位浮点数组
                    let buffer = e.inputBuffer.getChannelData(0);
                    let buffer1 = e.inputBuffer.getChannelData(1);
					var v = new Int16Array(buffer.length*2)//Int32Array(buffer.length*2);
					for (var i=0;i<buffer.length;i++){
					v[i2]=Math.trunc(buffer[i]*30000);
					i2++;
					v[i2]=Math.trunc(buffer1[i]*30000);
					i2++;
                    //v[i+1]=Math.trunc(buffer1[Math.floor(i/2)]*30000);
					}
					i2=0

					//c.push(v)
				//b= new Int16Array(v)
					console.log(c.length,v)
					socket.send(v)
					//if (c.length>10){socket.send(c);c=[]}


                };           
            }).catch((error) => {

            });
        } else {

        }

</script>
</body>
</html>