Blazor播放生成的声音没有文件

Question

在Blazor项目中，我生成声音/噪声信号，如@DanW的粉红噪声示例，生成值在-1.0 -1.0之间的double[]。是否有可能在浏览器中直接播放这个数组作为音频?到目前为止，我所发现的关于声音/音频和浏览器的所有内容都是从现有文件中播放音频。

编辑:我正在使用c#中的一些本机dll进行一些过滤，并且在c#中比在javascript中更舒适，因此尝试在c#中做大多数工作，而不是javascript。

Answer 1

所以我管理与WebAudio API找出如何:

Javascript:

// for cross browser compatibility
const AudioContext = window.AudioContext || window.webkitAudioContext;
audioCtx = {};
function initAudio() {
// creation of audio context cannot not be done on loading file, must be done afterwards
audioCtx = new AudioContext();
return audioCtx.sampleRate;
}
// floats is a 1-D array with channel data after each other:
// ch1 = floats.slice(0,nSamples)
// ch2 = floats.slice(nSamples,nSamples*2)
function playNoise(floats, nChannels) {
const bufferSize = floats.length / nChannels;
let arrayBuffer = audioCtx.createBuffer(nChannels, bufferSize, audioCtx.sampleRate);
for (var i = 0; i < nChannels; i++) {
let f32arr = new Float32Array(floats.slice(i * bufferSize, (i + 1) * bufferSize));
arrayBuffer.copyToChannel(f32arr, i, 0);
}
// Creating AudioBufferSourceNode
let noise = audioCtx.createBufferSource();
noise.buffer = arrayBuffer;
noise.connect(audioCtx.destination);
noise.start();
return true;
}

Blazorise页面(我使用Blazorise (Button)):

@page "/Tests"
@inject IJSRuntime js
<h3>Test</h3>
<Button Clicked="@(async () => await TestJS())" Color="Color.Primary">Test JS</Button>
@code {
double fs;
protected override async Task OnInitializedAsync()
{
fs = await js.InvokeAsync<double>("initAudio");
await base.OnInitializedAsync();
}
private async Task TestJS()
{
var nChannels = 2;
var nSecs = 5;
var nSampels = (int)fs * nSecs * nChannels;
var floats = new float[nSampels];
var freq = 440;
for (int i = 0; i < nSampels / nChannels; i++)
{
floats[i] = (float)Math.Sin(i * freq * 2 * Math.PI / fs);
floats[i + nSampels / 2] = (float)Math.Sin(i * freq * 2 * 2 * Math.PI / fs);
}
var ok = await js.InvokeAsync<bool>("playNoise", floats, nChannels);
}
}

按钮在左通道(通道1)播放440 Hz的音调，在右通道(通道2)播放880 Hz的音调。

编辑:采样量不必与AudioContext相同。查看规格

Answer 2

Blazor没有预先打包声音编辑功能，但现在有了JS隔离功能，这意味着组件可以加载所需的JS模块。

我的建议是使用WebAudio API等在定制组件集合中直接在JavaScript中完成所有音频内容。

你可以使用c#来生成波形等等，但我不确定这样做有什么好处，除非你想使用现有的c#库。

Answer 3

我使用Java (Spring Framework)生成文件，并通过Thymeleaf将原始PCM下载到html中的Javascript变量中，并通过Web Audio API播放它们，例如，使用AudioBuffer对象。Blazor的某些方面是否阻止或抑制了Web音频对象的使用?当有指定不同语言的脚本标签时，如果有一种方法可以在它们之间进行通信，那么IDK HTML是如何工作的。