vueに音声ファイルを追加する方法

今回はvueで音声ファイルを追加する方法を紹介します。vueで音声ファイルを追加する際の注意点を実際に見てみましょう。

場合によっては、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. vue-loader.conf.js ファイル内のオーディオの src 属性に変換属性オプションを追加して、オーディオの src 属性のコンテンツをモジュールに変換する必要があることを vue-loader に知らせます。

りー

3. オーディオタグを追加し、リソースファイルを導入します

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"
 }
}

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

4. プロジェクト

またはパッケージを再起動して公開すると、音が聞こえるようになります。

この記事の事例を読んだ後、あなたはその方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

要素UI Excelのエクスポート方法

vue-dplayer hls再生を実装する詳細な手順

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