vueを使用してmp3オーディオファイルを追加する方法

この記事では主にvueにmp3オーディオファイルを追加する方法を紹介しますので、参考にしてください。

vue にオーディオ ファイルを追加する必要がある場合がありますが、オーディオ ファイルをアセット ディレクトリに直接配置すると、正常に再生できないことがわかります。一般的に使用される 2 つの構成方法を次に示します。

方法 1.以下に示すように、音声ファイルは静的ディレクトリに配置され、呼び出されます

<audio class="success" 
    src="/static/audios/do_wrong.mp3">
</audio>

上記の方法でこの問題を解決できます。

方法 2. プロジェクトの mp3 形式パーサーを構成します

1. 次のように webpack.base.conf.js にローダーを追加します

{
   test: /\.(mp3)(\?.*)?$/,
   loader: 'url-loader',
   options: {
    name: utils.assetsPath('assets/[name].[hash:7].[ext]')
   }
}

2。 js ファイルは、オーディオの src 属性に変換属性オプションを追加して、オーディオの src 属性のコンテンツをモジュールに変換する必要があることを vue-loader に知らせます。

var utils = require('./utils')
var config = require('../config')
var isProduction = process.env.NODE_ENV === 'production'

module.exports = {
 loaders: utils.cssLoaders({
  sourceMap: isProduction
   ? config.build.productionSourceMap
   : config.dev.cssSourceMap,
  extract: isProduction
 }),
 transformToRequire: {
  "audio": "src"
 }
}

3. audioタグを追加してリソースファイルを導入します

<audio autoplay="autoplay" 
    controls="controls"
    preload="auto"
    src="../assets/allright.mp3">
</audio>

この時のリソースファイルはassetsディレクトリに置くことができます。

4. プロジェクトまたはパッケージを再起動し、サウンドを聞くために公開します。

上記は私があなたのためにまとめたものです。

関連記事:

Vue2の親コンポーネントと子コンポーネントの双方向バインディングについて

vue2.0で異なる画像をループスルーしてロードする(詳細なチュートリアル)

以上がvueを使用してmp3オーディオファイルを追加する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。