相关疑难解决方法(0)

我最终想要做的是从用户的麦克风录制,并在完成后将文件上传到服务器.到目前为止,我已设法使用以下代码为元素创建流:

var audio = document.getElementById("audio_preview");

navigator.getUserMedia  = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
navigator.getUserMedia({video: false, audio: true}, function(stream) {
   audio.src = window.URL.createObjectURL(stream);
}, onRecordFail);

var onRecordFail = function (e) {
   console.log(e);
}

我如何从那里,到录制到文件？

我正在使用以下方法来播放包含wav数据的字节数组.该函数正在从GWT项目中调用.

此功能播放声音,但它听起来像某种地狱怪物.采样率肯定是正确的(声音是由neospeech生成的)我已经为numberOfSamples尝试了各种值,这似乎只代表音频数据的长度.

numberOfSamples的值大于30000将播放音频文件的全长,但它是乱码且可怕的.

那么,我做错了什么？

function playByteArray(byteArray, numberOfSamples) {
    sampleRate = 8000;

    if (!window.AudioContext) {
        if (!window.webkitAudioContext) {
            alert("Your browser does not support any AudioContext and cannot play back this audio.");
            return;
        }
        window.AudioContext = window.webkitAudioContext;
    }

    var audioContext = new AudioContext();

    var buffer = audioContext.createBuffer(1, numberOfSamples, sampleRate);
    var buf = buffer.getChannelData(0);
    for (i = 0; i < byteArray.length; ++i) {
        buf[i] = byteArray[i];
    }

    var source = audioContext.createBufferSource();
    source.buffer = buffer;
    source.connect(audioContext.destination);
    source.start(0);
}

我正在构建一个用于离线播放一些音频文件的网络应用程序。我已经阅读并测试了Service Worker API的缓存部分，我可以轻松地将所有音频文件添加到命名缓存中。但是，当我<audio src='/audio/file.mp3'>向 DOM 和play()它添加 a 时，浏览器似乎没有使用它，即使该确切的 URL 已添加到缓存中。

在某种程度上，不自动使用缓存是有道理的，因为这样命名缓存就没有任何意义。

我正在使用 create-react-app，由于我没有弹出，我没有控制 Service Worker。不过，据我所知，无论如何都不建议预先缓存较大的文件，因此我在 UI 中创建了一个函数，让用户决定何时缓存所有文件。

我的问题是：如何将缓存的音频文件放入音频元素？

编辑：我认为这个问题应该可以从我的问题中理解，但是被要求添加代码，所以这是我尝试过的。

该标记有一个音频元素和两个按钮。第一个按钮将 mp3 url 加载到缓存中，第二个按钮尝试两种不同的方式将其设置为音频元素的源：

1. 从缓存的响应中插入 blob
2. 将缓存的请求 url 设置为音频 src

当然，它们都不起作用，这就是我写这篇文章的原因。:)

<div>
    <audio src="/audio/shape_of_you.mp3" controls/>
</div>
<div>
    <button onclick="addToCache()">Add to cache</button>
    <button onclick="playCachedAudio()">Play cached audio</button>
</div>


<script>
    function addToCache() {
        caches.open('myCache').then((cache) => {
            cache.add('/audio/rise.mp3').then(() => {
                console.log('cached');
            });
        });
    }

    function playCachedAudio() {
        caches.open('myCache').then((cache) => {
            cache.match('/audio/rise.mp3').then((cachedAudio) => {
                cachedAudio.blob().then(cont => {
                    let audioEl …