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 相关文章推荐
javascript打开新窗口同时关闭旧窗口
Jan 16 Javascript
js绑定事件this指向发生改变的问题解决方法
Apr 23 Javascript
javascript创建createXmlHttpRequest对象示例代码
Feb 10 Javascript
jquery实现的随机多彩tag标签随机颜色和字号大小效果
Mar 27 Javascript
jquery加载图片时以淡入方式显示的方法
Jan 14 Javascript
jquery实现隐藏在左侧的弹性弹出菜单效果
Sep 18 Javascript
深入解析JavaScript中的数字对象与字符串对象
Oct 21 Javascript
超实用的JavaScript代码段 附使用方法
May 22 Javascript
解决JQuery全选/反选第二次失效的问题
Oct 11 jQuery
vue cli构建的项目中请求代理与项目打包问题
Feb 26 Javascript
微信小程序在地图选择地址并返回经纬度简单示例
Dec 03 Javascript
layui 富文本编辑器和textarea值的相互传递方法
Sep 18 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/11/19 PHP
php实现插入数组但不影响原有顺序的方法
2015/03/27 PHP
php自动更新版权信息显示的方法
2015/06/19 PHP
CSS鼠标响应事件经过、移动、点击示例介绍
2013/09/04 Javascript
基于jquery实现的文字淡入淡出效果
2013/11/14 Javascript
js传值后台中文出现乱码的解决方法
2016/06/30 Javascript
详细探究ES6之Proxy代理
2016/07/22 Javascript
AngularJS框架的ng-app指令与自动加载实现方法分析
2017/01/04 Javascript
vue.js项目中实用的小技巧汇总
2017/11/29 Javascript
JavaScript时间戳与时间日期间相互转换
2017/12/11 Javascript
vue计算属性和监听器实例解析
2018/05/10 Javascript
代码分析vue中如何配置less
2018/09/28 Javascript
微信小程序canvas绘制圆角base64图片的实现
2019/08/18 Javascript
JavaScript 引用类型实例详解【数组、对象、严格模式等】
2020/05/13 Javascript
[45:52]完美世界DOTA2联赛PWL S3 Forest vs INK ICE 第二场 12.09
2020/12/12 DOTA
python获取外网ip地址的方法总结
2015/07/02 Python
Python减少循环层次和缩进的技巧分析
2016/03/15 Python
Python自动化开发学习之三级菜单制作
2017/07/14 Python
Python多继承原理与用法示例
2018/08/23 Python
Pandas:Series和DataFrame删除指定轴上数据的方法
2018/11/10 Python
Python之列表实现栈的工作功能
2019/01/28 Python
python 正则表达式参数替换实例详解
2020/01/17 Python
解决python运行启动报错问题
2020/06/01 Python
virtualenv介绍及简明教程
2020/06/23 Python
keras K.function获取某层的输出操作
2020/06/29 Python
Python操作word文档插入图片和表格的实例演示
2020/10/25 Python
幼儿园园长岗位职责
2013/11/26 职场文书
小学教师国培感言
2014/02/08 职场文书
车间主任岗位职责
2014/03/16 职场文书
企业节能减排实施方案
2014/03/19 职场文书
小学节能减排倡议书
2014/05/15 职场文书
党员民主评议自我评价
2014/10/20 职场文书
2015年人事科工作总结
2015/04/28 职场文书
只需要12页,掌握撰写一流商业计划书的技巧
2019/05/07 职场文书
nginx搭建图片服务器的过程详解(root和alias的区别)
2021/03/31 Servers
刚学完怎么用Python实现定时任务,转头就跑去撩妹!
2021/06/05 Python