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 2.0+Vue-router构建一个简单的单页应用（附源码）
这篇文章主要给大家介绍了基于Vue 2.0+Vue-router构建了一个简单的单页应用，文中通过实例介绍的非常详细，并在文末给出了源码下载，需要的朋友可以下载学习参考，下面来一起看看吧。2017-03-03
学习过vue2的宝子们肯定知道,组件传值是vue项目开发过程中必不可少的功能场景,下面这篇文章主要给大家介绍了关于vue3中组件传值的多种方法,文中通过图文介绍的非常详细,需要的朋友可以参考下2023-01-01
这篇文章主要给大家介绍了关于vue项目main.js使用方法的相关资料,main.js文件是程序的入口文件,加载各种公共组件,文中通过代码介绍的非常详细,需要的朋友可以参考下2023-09-09
这篇文章主要介绍了vue如何实现清空this.$route.query的值，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
这篇文章主要给大家介绍了关于vue3使用base64加密的两种方法,我们在vue项目中有时会使用到Base6464转码,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-07-07
文章总结：介绍了两种实现父组件触发子组件方法的常用方法：通过ref访问子组件实例并调用方法,以及使用自定义事件触发子组件方法2025-01-01
这篇文章主要为大家详细介绍了vue自定义翻页组件的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-09-09
vue element el-form 多级嵌套验证的实现示例
本文主要介绍了vue element el-form 多级嵌套验证的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-08-08
这篇文章主要介绍了vue项目点击元素后如何改变样式问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
本篇文章主要介绍了VUE中v-model和v-for指令详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-06-06
最新评论