Is there a way to load local files into HTML in Electron? Getting ERR_UNKNOWN_URL_SCHEME

Question

I have an Electron app that's trying to load a local audio file into an HTML5 <audio> element. The path itself is fine file:///../song.mp3 and I've set webSecurity to false, but I'm still getting Failed to load resource: net::ERR_UNKNOWN_URL_SCHEME. From that same error, if I copy the address and paste it into my browser, I get the correct file.

Are there any other settings I need to change to get this to work?

Appreciate your time

Answer 1

I think this is a bug. The URL scheme of the file is not enabling as a URL scheme.

You can use this code below inside of app.on('ready'....:

protocol.registerFileProtocol('file', (request, cb) => {
    const url = request.url.replace('file:///', '')
    const decodedUrl = decodeURI(url)
    try {
      return cb(decodedUrl)
    } catch (error) {
      console.error('ERROR: registerLocalResourceProtocol: Could not get file path:', error)
    }
  })

it will be fixed