首頁 > web前端 > js教程 > 主體

透過使用vue如何實現添加mp3音訊文件

亚连
發布: 2018-06-02 09:49:00
原創
5494 人瀏覽過

本篇文章主要介紹了vue中加入mp3音訊檔案的方法,現在分享給大家,也為大家做個參考。

有的時候我們需要在vue中添加音頻文件,但是直接將音頻文件放置了assets目錄下的時候,會發現並不能正常播放,下面是兩種常用的配置方法:

方法一、將音訊檔案放置在static目錄中,然後進行調用,如下所示

#
<audio class="success" 
    src="/static/audios/do_wrong.mp3">
</audio>
登入後複製

以上這種方式就能夠解決這個問題了。

方法二、為專案配置mp3格式的解析器

#1、在webpack.base.conf.js中新增載入器,如下

{
   test: /\.(mp3)(\?.*)?$/,
   loader: &#39;url-loader&#39;,
   options: {
    name: utils.assetsPath(&#39;assets/[name].[hash:7].[ext]&#39;)
   }
}
登入後複製

2、在vue-loader.conf.js檔案為audio的src屬性新增轉換屬性選項,讓vue-loader 知道需要將audio 的src 屬性的內容轉換為模組。

var utils = require(&#39;./utils&#39;)
var config = require(&#39;../config&#39;)
var isProduction = process.env.NODE_ENV === &#39;production&#39;

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.x中父元件與子元件雙向綁定(詳細教學)

詳細介紹在Vue2.0中v-for迭代語法的變化(詳細教程)

#在vue2.0中循環遍歷並且加載不同圖片(詳細教程)

#

以上是透過使用vue如何實現添加mp3音訊文件的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!