mp3 files are served as text/html

[kdekooter]

Version

4.0.5

Environment info

Environment Info:

  System:
    OS: macOS 10.15.1
    CPU: (12) x64 Intel(R) Core(TM) i7-8700B CPU @ 3.20GHz
  Binaries:
    Node: 12.4.0 - /usr/local/bin/node
    Yarn: 1.16.0 - /usr/local/bin/yarn
    npm: 6.11.3 - /usr/local/bin/npm
  Browsers:
    Chrome: 78.0.3904.70
    Firefox: 70.0
    Safari: 13.0.3
  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.0.0 
    @vue/babel-plugin-transform-vue-jsx:  1.0.0 
    @vue/babel-preset-app:  4.0.5 
    @vue/babel-preset-jsx:  1.1.1 
    @vue/babel-sugar-functional-vue:  1.0.0 
    @vue/babel-sugar-inject-h:  1.0.0 
    @vue/babel-sugar-v-model:  1.1.1 
    @vue/babel-sugar-v-on:  1.1.0 
    @vue/cli-overlay:  4.0.5 
    @vue/cli-plugin-babel: ^4.0.0 => 4.0.5 
    @vue/cli-plugin-eslint: ^4.0.0 => 4.0.5 
    @vue/cli-plugin-router: ^4.0.0 => 4.0.5 
    @vue/cli-plugin-vuex: ^4.0.0 => 4.0.5 
    @vue/cli-service: ^4.0.0 => 4.0.5 
    @vue/cli-shared-utils:  4.0.5 
    @vue/component-compiler-utils:  3.0.0 
    @vue/eslint-config-prettier: ^5.0.0 => 5.0.0 
    @vue/preload-webpack-plugin:  1.1.1 
    @vue/web-component-wrapper:  1.2.0 
    eslint-plugin-vue: ^5.0.0 => 5.2.3 
    vue: ^2.6.10 => 2.6.10 
    vue-eslint-parser:  5.0.0 
    vue-hot-reload-api:  2.3.4 
    vue-loader:  15.7.2 
    vue-router: ^3.1.3 => 3.1.3 
    vue-style-loader:  4.1.2 
    vue-template-compiler: ^2.6.10 => 2.6.10 
    vue-template-es2015-compiler:  1.9.1 
    vuex: ^3.0.1 => 3.1.1 
  npmGlobalPackages:
    @vue/cli: 4.0.2

Steps to reproduce

• add an mp3 file to /assets
• try to load it in an <audio> tag
• watch the browser console

What is expected?

it will be served with the correct mime type

What is actually happening?

it is served as text/html leading the browser to reject it, with the following console messages:

HTTP “Content-Type” of “text/html” is not supported. Load of media resource <edited> failed.

Cannot play media. No decoders for requested formats: text/html

[haoqunjiang]

Hi, thanks for your report.
Would you please reduce your issue to a small reproducible example (e.g. a GitHub repository together with instructions on how to get to the problem)? Without a runnable example it would be difficult for us to find out what is going wrong.

[kdekooter]

@sodatea you can find the git repo here: https://codesandbox.io/s/github/kdekooter/rhino. Run the app click on "Start" and watch the browser console (on FF preferably)

[haoqunjiang]

In this case, you are referring to it with an absolute URL, it should be placed in the public folder.

For more details, see https://cli.vuejs.org/guide/html-and-static-assets.html#static-assets-handling

---

And as I just checked it out, if you want to refer to it with a relative URL, there's currently a caveat that vue-loader didn't transform the src attribute of <audio> elements by default.

Two workarounds:

1. import audio files in the way like <audio :src="require('../assets/sheep.mp3')" controls></audio>
2. Or, in vue.config.js:

module.exports = {
  chainWebpack: (config) => {
    config.module
      .rule('vue')
        .use('vue-loader')
        .tap(options => {
          options.transformAssetUrls = { audio: 'src' }
          return options
        })
  }
}

And then you can use the syntax like <audio src="../assets/sheep.mp3" controls></audio>

[kdekooter]

Thanks for the swift response @sodatea. The vue config solution is not working unfortunately. Placing the files in the public folder does. So I can move on.