Fetch external audio file into web audio API buffer - cors error?

问题

I'm working on a project which I hoped would take random selections from the xeno-canto archive to create a 'virtual dawn chorus'

I'm doing this in javascript with the webAudio API. I have a list of samples and their urls such as

xeno-canto.org/sounds/uploaded/YQNGFTBRRT/XC144576-ABTO_BWRNWR_15Apr2013_Harter.mp3'

Which I'm tyring to load into an audio buffer. This is my 'loadAudio' function in javascript. I've successfully used this in other projects to get my audio - although that was from files hosted by myself

function loadAudio(url, loop, done) {
    fetch(url, {'mode': 'no-cors'})
      .then(response => response.arrayBuffer())
      .then(arrayBuffer => context.decodeAudioData(arrayBuffer))
      .then(audioBuffer => {
        console.log('audio ' + url + ' loaded')
        var sourceNode = context.createBufferSource()
        sourceNode.buffer = audioBuffer
        done(null, sourceNode)
        sourceNode.start()
        sourceNode.loop = loop
      })
  }

But on calling this function I get the error

Fetch API cannot load xeno-canto.org/sounds/uploaded/YQNGFTBRRT/XC144576-ABTO_BWRNWR_15Apr2013_Harter.mp3. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin localhost:3000' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

I tried including fetch(url, **{'mode': 'no-cors'}**) in the function but then I get the error

(index):1 Uncaught (in promise) TypeError: Failed to fetch

Which I'm guessing is the same error, just the 'opaque' response.

Can anyone point me in the right direction? Or is it simply not possible to load in audio that I don't host on my own server? I saw a project that scraped random audio from SoundCloud without any problems (sorry can't post links as a newbie it's sebpiq's paulstretch example (on github)), but I admit I couldn't work out the code.

Please note above I had to remove http element from the start of links as I'm not allowed to post links yet.

Thanks!

来源：https://stackoverflow.com/questions/45921431/fetch-external-audio-file-into-web-audio-api-buffer-cors-error

标签

javascript

fetch

web-audio-api