vue.js - 尝试在 Vue.JS App 中播放音频时出现 DOMException 错误

Question

我想通过单击一个按钮来播放音乐文件，但是我抛出了这个错误：

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

这是调用播放音乐功能的按钮：

<button  v-on:click="playMusic()">Play Song</button>

这是我的播放音乐功能：

playMusic: function() {
                var audio = new Audio("../../media/KR881.mp3");
                audio.play();
            },

我该如何解决这个错误？

Answer 1

您应该将规则应用于您的 webpack.config.js 以便通过 webpack 处理音频文件

    module: {
        rules: [
            {
                test: /\.mp3$/,
        loader: 'file-loader',
                exclude: /node_modules(?!\/foundation-sites)|bower_components/,
                options: {
                name: '[path][name].[ext]'
            }
            }
        ]
    }