在播放器上的浏览器上播放wav字节数据 [英] Play wav byte data on the browser on a player

问题描述

有人可以帮我解决这个问题我有点困惑，我从数据库获取wav数据，我可以设法使用此功能在浏览器上播放这个wav数据：

Can someone please help me on this issue I am a little confused, i am getting wav data from database, and I can manage to play this wav data on the browser using this function :

function playWave(byteArray) {
    var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
    var myAudioBuffer = audioCtx.createBuffer(1, byteArray.length, 8000);
    var nowBuffering = myAudioBuffer.getChannelData(0);
    for (var i = 0; i < byteArray.length; i++) {
        nowBuffering[i] = byteArray[i];
    }

    var source = audioCtx.createBufferSource();
    source.buffer = myAudioBuffer;
    source.connect(audioCtx.destination);
    source.start();
}

一切正常，我只需要一个GUI播放器来播放/暂停/停止最后绘制一个光谱。

Everything works fine, I only need a GUI player to play/pause/stop and eventually draw a spectrum.

首先我尝试使用HTML5的音频标签，但你需要在src参数中放入一个有效的URL：

First I tried to use the audio tag of HTML5 but you need to put a valid url in src paramater :

<audio controls="controls">
  Your browser does not support the &lt;audio&gt; tag. 
  <source src="../m/example.mp3" />
</audio> 

是否可以将src参数更改为类似于放置和播放字节的方法阵列？是否有任何球员可以处理这种情况？我只是想以一定的速率（8000Hz）在播放器（播放/暂停/停止）上播放数据库中的wav，这似乎是一个简单的问题，但我发现没有文章或文档在互联网上谈论它。我在互联网上找到的唯一玩家，你需要提供一个有效的文件。

Is it possible to change the src parameter to something like a method where you can put and play your byte array? Is there any player that can handle this kind of situation? I just want to play a wav from database on a player (play/pause/stop) with a certain rate (8000Hz), it seems to be an easy issue, but I found no article or documentation talking about that on the internet. The only players I found on the internet , you need to provide a valid file.

推荐答案

你应该可以使用 Blob byteArray 正确。然后，您可以在 source 元素上创建一个blob对象URL并将其设置为 src ：

You should be able to use Blob after converting the byteArray correctly. You can then create a blob Object URL and set that as src on the source element:

// Create blob from Uint8Array & Object URL.
const blob = new Blob([getByteArray()], { type: 'audio/wav' });
const url = URL.createObjectURL(blob);

// Get DOM elements.
const audio = document.getElementById('audio');
const source = document.getElementById('source');

// Insert blob object URL into audio element & play.
source.src = url;
audio.load();
audio.play();

// Get data from database/server, hardcoded here for simplicity.
function getByteArray() {
  const data = [82, 73, 70, 70, 222, 37, 0, 0, 87, 65, 86, 69, 102, 109, 116, 32, 16, 0, 0, 0, 1, 0, 1, 0, 68, 172, 0, 0, 136, 88, 1, 0, 2, 0, 16, 0, 100, 97, 116, 97, 186, 37, 0, 0, 0, 0, 255, 12, 2, 27, 254, 40, 2, 55, 254, 68, 1, 83, 0, 83, 0, 69, 0, 55, 255, 40, 2, 27, 253, 12, 3, 255, 254, 240, 0, 227, 1, 213, 255, 198, 1, 185, 255, 170, 1, 175, 255, 188, 1, 203, 255, 216, 1, 231, 255, 244, 2, 3, 254, 16];

  // Convert byteArray into Uint8Array.
  return new Uint8Array(data);
}

<audio controls="controls" id="audio" loop>
  Your browser does not support the &lt;audio&gt; tag. 
  <source id="source" src="" type="audio/wav" />
</audio>

这篇关于在播放器上的浏览器上播放wav字节数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！