有没有在浏览器中播放原始wav数据的好方法？

编程入门行业动态更新时间:2024-10-09 09:13:17

有没有在浏览<a href=https://www.elefans.com/category/jswz/34/1771423.html style= 器中播放原始wav数据的好方法？"/>

有没有在浏览器中播放原始wav数据的好方法？

我正在尝试在浏览器中播放wav原始数据，该数据是通过socket.io从nodejs服务器传输的，主要思想是尽快播放接收的数据，因此我不需要等到接收到数据完成。在这种情况下，我尝试使用blob，但总是会发生以下情况：如果我有一块原始数据，并且正在使用blob对其进行转换以进行播放，那么当第二块准备就绪并再次使用blob进行转换时，在播放音频时会中断一段时间。

[我也尝试使用下面的代码，它已经起作用了，但是在播放它时我听到很多杂音。谁能帮我解决这个问题，并告诉我如何播放没有噪音的音频？

P.S。传输中的超时是主要思想的一部分，我尝试在没有它的情况下播放音乐，但仍然没有运气。

<html>
<head>
 <script src="socket.io.js"></script>
 <script src=" .io-stream/0.9.1/socket.io-stream.js"> 
 </script>
 <script src=".1.1.min.js"></script>
</head>
<body>
 <button id="start">Play music!</button>
 <script>
     $(function () {
         var socket = io.connect("http://localhost:3000");
         var stream = ss.createStream();
         // receive data
         window.AudioContext = window.AudioContext || window.webkitAudioContext;
         var audioCtx = new AudioContext();
         var audioBuffer = audioCtx.createBuffer(2, 22050, 44100);
         var source = audioCtx.createBufferSource();
         source.buffer = audioBuffer;
         //  source.connect(audioCtx.destination);
         gainNode = audioCtx.createGain();
         gainNode.gain.value = 0;
         gainNode.connect(audioCtx.destination);
         source.connect(gainNode);
         source.start(0);
         socket.on('chat message', function (msg) {
             console.log(".");
             console.log(msg);
             playsound(msg)
         });
         function playsound(raw) {
             var context = audioCtx;
             var buffer = new Int16Array(raw);
             console.log(buffer);
             var channel0buffer = new Float32Array(buffer.length / 2);
             var channel1buffer = new Float32Array(buffer.length / 2);

             var j = 0;
             for (var i = 0; i < buffer.length; i++) {
                 channel0buffer[j] = buffer[i];
                 i++;
                 channel1buffer[j] = buffer[i];
                 j++;
             }
             var src = context.createBufferSource(),
                 audioBuffer = context.createBuffer(2, buffer.length, context.sampleRate);
             audioBuffer.getChannelData(0).set(channel1buffer);
             audioBuffer.getChannelData(1).set(channel0buffer);
             src.buffer = audioBuffer;
             src.connect(gainNode);
             src.start(0);
         }
         document.getElementById("start").addEventListener('click', function () {
             audioCtx.resume().then(() => {
                 console.log('Playback resumed successfully');
             });
         });
     });
 </script>
 <p>Volume</p>
 <input id="volume" type="range" min="0" max="1" step="0.1" value="0.0" />
 <script>
     document.getElementById('volume').addEventListener('change', function () {
         gainNode.gain.value = this.value;
     });
     function touchStarted() {
         getAudioContext().resume();
     }
 </script>
</body>
</html>

我的服务器代码如下：

const fs = require("fs");
var app = require("express")();
var http = require("http").createServer(app);
var io = require("socket.io")(http);

app.get("/", (req, res) => {
    res.sendFile(__dirname + "/index.html");
});
io.on("connection", (socket) => {
    console.log("a user connected");
    socket.on("disconnect", () => {
        console.log("user disconnected");
    });
    socket.on("chat message", (msg) => {
        console.log("message: " + msg);
        io.emit("chat message", msg);
    });
});
http.listen(3000, () => {
    console.log("listening on *:3000");
});
const stream = fs.createReadStream("Original1.wav", {
    highWaterMark: 640000, // internal buffer size
});
stream.on("data", async (chunk) => {
    stream.pause();
    let newChunk = new Int16Array(chunk);
    await asyncHandle(chunk);
    setTimeout(() => {
        stream.resume();
    }, 1000);
});
async function asyncHandle(chunk) {
    console.log(chunk);
    io.emit("chat message", chunk);
}