Audio Files No Longer Play After Upgrading to Vue CLI 3

vue-cli

#1

We recently upgraded our project to use CLI 3, and now our audio files that were stored in the /static folder no longer play. Getting the following error in the console no matter where I place the file:

NotSupportedError: Failed to load because no supported source was found.

File structure:

project
    >src
        >assets
          bing.mp3
        >components
          myComponent.vue
        >main.js

In main.js:

Vue.mixin({
	methods: {
		playSound() {
			const path = './src/assets/bing.mp3';
			const audio = new Audio(path);
			var playPromise = audio.play();

			if (playPromise !== undefined) {
				playPromise.then(_ => {
					console.log('Did you hear that?');
				})
				.catch(error => {
					console.log(`playSound error: ${error}`);
				});
			}
		}
	}
})

In myComponent.vue:

...
created() {
    this.playSound();
},

In the Network tab for bing.mp3:

Request URL: http://localhost:8081/src/assets/bing.mp3

Request Method: GET

Status Code: 206 Partial Content

Remote Address: 127.0.0.1:8081

Referrer Policy: no-referrer-when-downgrade

Before we upgraded, bing.mp3 was located in project’s static folder and was referenced this way:
const path = '/static/intuition.mp3';
and it worked perfectly.

Project is running on @vue/cli-service version: 3.4.1 and vue-loader version: 15.7.0

What am I missing here?


#2

By default vue-cli 3 use the public folder for assets.

https://cli.vuejs.org/guide/html-and-static-assets.html#relative-path-imports

I think you should put your mp3 files inside the public folder.


#3

Thanks @eperedo I did try that before, but it still gave me the same error.

I added the mp3 file to the public folder again and changed the path in my playSound mixin accordingly,but maybe that’s not the correct way to reference it?

playSound() {
			const path = './public/bing.mp3';
			const audio = new Audio(path);
			var playPromise = audio.play();

			if (playPromise !== undefined) {
				playPromise.then(_ => {
					console.log('Did you hear that?');
				})
				.catch(error => {
					console.log(`playSound error: ${error}`);
				});
			}
		}

And for reference, I did up the limit of files in the media rule settings, since it was pretty low by default. Here are my current settings for the media rule in vue.config:

/* config.module.rule('media') */
{
  test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
  use: [
    {
      loader: 'url-loader',
      options: {
        limit: 10240,
        fallback: {
          loader: 'file-loader',
          options: {
            name: 'media/[name].[hash:8].[ext]'
          }
        }
      }
    }
  ]
}

Yet I still get the Failed to load because no supported source was found. error. In the Network tab for bing.mp3: Request URL: http://localhost:8080/public/bing.mp3 That is what the URL should look like, correct?


#4

I think you don’t need the ./public in your path.

const path = '/bing.mp3';

can you try that?


#5

Oh my goodness, that worked! I can’t believe how simple that was, thank you so much for your help!