vue中添加mp3音频文件的方法

更新时间：2018年03月02日 09:27:53 作者：涟动下渔舟

本篇文章主要介绍了vue中添加mp3音频文件的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

有的时候我们需要在vue中添加音频文件，但是直接将音频文件放置了assets目录下的时候，会发现并不能正常播放，下面是两种常用的配置方法：

方法一、将音频文件放置在static目录中，然后进行调用，如下所示

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

以上这种方式就能够解决这个问题了。

方法二、给项目配置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文件为audio的src属性添加转换属性选项，让 vue-loader 知道需要将 audio 的 src 属性的内容转换为模块。

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、重新启动项目或者打包发布，即可听到声音。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

深入浅析vue中cross-env的使用
cross-env是跨平台设置和使用环境变量的脚本。这篇文章主要介绍了vue中cross-env的使用,需要的朋友可以参考下
2019-09-09
Vue中axios的基本用法详解
axios 是一个基于promise用于浏览器和 nodejs 的 HTTP 客户端，这篇文章主要介绍了Vue中axios的基本用法及axios的特征和使用注意细节，本文通过示例代码给大家介绍的非常详细,需要的朋友可以参考下
2022-07-07
vue3+ElementPlus封装函数式弹窗组件详解
这篇文章主要为大家详细介绍了如何利用vue3和ElementPlus封装函数式弹窗组件，文中的示例代码讲解详细，感兴趣的小伙伴可以了解一下
2023-08-08
Vue中的过滤器(filter)详解
vue filter 过滤器处理数据的作用,使用位置:mustache插值和v-bind表达式，过滤器用于文本转换,复杂的数据处理则用computed，这篇文章主要介绍了Vue中的过滤器（filter）,需要的朋友可以参考下
2022-11-11
每天学点Vue源码之vm.$mount挂载函数
这篇文章主要介绍了vm.$mount挂载函数，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-03-03
vue-router 源码之实现一个简单的 vue-router
这篇文章主要介绍了vue-router 源码之实现一个简单的 vue-router，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-07-07
Vue结合ElementUI上传Base64编码后的图片实例
这篇文章主要介绍了Vue结合ElementUI上传Base64编码后的图片实例，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
vue中data和data()的区别说明
这篇文章主要介绍了vue中data和data()的区别说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-03-03
使用vue编写一个点击数字计时小游戏
这篇文章主要为大家详细介绍了使用vue编写一个点击数字计时小游戏，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-08-08
vue 计时器组件的实现代码
本篇文章主要介绍了vue 计时器组件的实现代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-09-09