时间戳

首页 > 解决方案 > '无法在 Nuxt.js 应用程序中播放音频文件'

html - '无法在 Nuxt.js 应用程序中播放音频文件'

问题描述

我正在开发一个简单的 nuxt.js 项目，该项目播放两个音频文件并要求用户确定它们之间的音频间隔。我目前无法播放任何音频文件。我接受了这个解决方案（https://nuxtjs.org/docs/features/configuration/#extend-webpack-to-load-audio-files）但它不起作用

我还添加了 nuxt.config.js

  loaders: {
      vue: {
        transformAssetUrls: {
          audio: 'src',
        },
      },
    },
    extend(config, ctx) {
      config.module.rules.push({
        test: /\.(ogg|mp3|wav|mpe?g)$/i,
        loader: 'file-loader',
        options: {
          name: '[path][name].[ext]'
        }
      })
    }

这里是我的代码

 <div class="col-sm-12 col-sm-offset-2">
            <audio
              src="@/assets/audios/podcast1.mp3"
              controls
              class="audio my-3"
            ></audio>
          </div>

标签： htmlnuxt.jsbootstrap-vue

解决方案

我有一个类似的问题。但就我而言，我从代码中播放声音警报。此代码以前有效：

const audio_file = require('@/assets/beeps/some_beep.mp3')
const beep = new Audio(audio_file)
beep.play()

但更新后停止工作。解决问题有帮助：

const audio_file = require('@/assets/beeps/some_beep.mp3').default

我在这里学到的： https ://amjohnphilip.medium.com/how-to-work-with-audio-files-in-nuxt-js-8da7abb3c5bb

推荐阅读