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


Posted in Javascript onMarch 02, 2018

有的时候我们需要在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、重新启动项目或者打包发布,即可听到声音。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
[原创]网络复制内容时常用的正则+editplus
Nov 30 Javascript
点击按钮或链接不跳转只刷新页面的脚本整理
Oct 22 Javascript
js清理Word格式示例代码
Feb 13 Javascript
使用js判断当前时区TimeZone是否是夏令时
Feb 23 Javascript
原生Javascript封装的一个AJAX函数分享
Oct 11 Javascript
Js类的静态方法与实例方法区分及jQuery拓展的两种方法
Jun 03 Javascript
JavaScript兼容性总结之获取非行间样式案例
Aug 07 Javascript
原生JS实现的放大镜效果实例代码
Oct 15 Javascript
vue2.0使用v-for循环制作多级嵌套菜单栏
Jun 25 Javascript
vue学习笔记五:在vue项目里面使用引入公共方法详解
Apr 04 Javascript
重学 JS:为啥 await 不能用在 forEach 中详解
Apr 15 Javascript
在JavaScript中实现链式调用的实现
Dec 24 Javascript
JS中利用FileReader实现上传图片前本地预览功能
Mar 02 #Javascript
select标签设置默认选中的选项方法
Mar 02 #Javascript
原生JavaScript实现todolist功能
Mar 02 #Javascript
js判断输入框不能为空格或null值的实现方法
Mar 02 #Javascript
vue判断input输入内容全是空格的方法
Mar 02 #Javascript
Spring Boot/VUE中路由传递参数的实现代码
Mar 02 #Javascript
vue项目tween方法实现返回顶部的示例代码
Mar 02 #Javascript
You might like
php广告加载类用法实例
2014/09/23 PHP
PHP中递归的实现实例详解
2017/11/14 PHP
PHP 多任务秒级定时器的实现方法
2018/05/13 PHP
for 循环性能比较 提高for循环的效率
2009/03/19 Javascript
一次失败的jQuery优化尝试小结
2011/02/06 Javascript
完美解决AJAX跨域问题
2013/11/01 Javascript
js中arguments的用法(实例讲解)
2013/11/30 Javascript
JsRender for object语法简介
2014/10/31 Javascript
js获取元素外链样式的方法
2015/01/27 Javascript
javascript动态创建表格及添加数据实例详解
2015/05/13 Javascript
JavaScript中的toLocaleLowerCase()方法使用详解
2015/06/06 Javascript
javascript数组随机排序实例分析
2015/07/22 Javascript
jquery判断对象是否为空并遍历对象的简单实例
2016/07/26 Javascript
JavaScript中数据类型转换总结
2016/12/25 Javascript
Vue底层实现原理总结
2018/02/17 Javascript
react native基于FlatList下拉刷新上拉加载实现代码示例
2018/09/30 Javascript
说说如何利用 Node.js 代理解决跨域问题
2019/04/22 Javascript
JavaScript的Proxy可以做哪些有意思的事儿
2019/06/15 Javascript
基于ts的动态接口数据配置的详解
2019/12/18 Javascript
JS获取当前时间戳方法解析
2020/08/29 Javascript
[06:23]2014DOTA2西雅图国际邀请赛 小组赛7月12日TOPPLAY
2014/07/12 DOTA
Python中的装饰器用法详解
2015/01/14 Python
浅谈Python中chr、unichr、ord字符函数之间的对比
2016/06/16 Python
详解从Django Rest Framework响应中删除空字段
2019/01/11 Python
python GUI图形化编程wxpython的使用
2019/07/19 Python
django框架用户权限中的session缓存到redis中的方法
2019/08/06 Python
python requests库爬取豆瓣电视剧数据并保存到本地详解
2019/08/10 Python
美国CVS药店官网:CVS Pharmacy
2018/07/26 全球购物
毕业生动漫设计求职信
2013/10/11 职场文书
医学毕业生自我鉴定
2013/10/30 职场文书
日语求职信范文
2013/12/17 职场文书
大学辅导员事迹材料
2014/02/05 职场文书
仓库文员岗位职责
2014/04/06 职场文书
建筑工程质量通病防治方案
2014/06/08 职场文书
高二英语教学反思
2016/03/03 职场文书
python四个坐标点对图片区域最小外接矩形进行裁剪
2021/06/04 Python