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实现的仿Flash广告图片轮换效果
Apr 24 Javascript
javascript的键盘控制事件说明
Apr 15 Javascript
关于JavaScript中name的意义冲突示例介绍
May 29 Javascript
JavaScript字符串对象toUpperCase方法入门实例(用于把字母转换为大写)
Oct 17 Javascript
JavaScript用select实现日期控件
Jul 17 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【二】
May 10 Javascript
JS监听微信、支付宝等移动app及浏览器的返回、后退、上一页按钮的事件方法
Aug 05 Javascript
bootstrap表单按回车会自动刷新页面的解决办法
Mar 08 Javascript
使用express获取微信小程序二维码小记
May 21 Javascript
新手简单了解vue
May 29 Javascript
详解webpack打包vue项目之后生成的dist文件该怎么启动运行
Sep 06 Javascript
你不知道的 TypeScript 高级类型(小结)
Aug 28 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 set_magic_quotes_runtime() 函数过时解决方法
2010/07/08 PHP
php缓存技术详细总结
2013/08/07 PHP
PHP使用观察者模式处理异常信息的方法详解
2019/09/24 PHP
Laravel5.3+框架定义API路径取消CSRF保护方法详解
2020/04/06 PHP
学习JS面向对象成果 借国庆发布个最新作品与大家交流
2009/10/03 Javascript
js 与或运算符 || &amp;&amp; 妙用
2009/12/09 Javascript
js左侧多级菜单动态的解决方案
2010/02/01 Javascript
Extjs中RowExpander控件的默认展开问题示例探讨
2014/01/24 Javascript
jquery自动填充勾选框即把勾选框打上true
2014/03/24 Javascript
javascript实现选中复选框后相关输入框变灰不可用的方法
2015/08/11 Javascript
javascript省市级联功能实现方法实例详解
2015/10/20 Javascript
vue单页应用中如何使用jquery的方法示例
2017/07/27 jQuery
浅谈使用React.setState需要注意的三点
2017/12/18 Javascript
vue实现tab切换外加样式切换方法
2018/03/16 Javascript
vue.js与element-ui实现菜单树形结构的解决方法
2018/04/21 Javascript
微信小程序 Animation实现图片旋转动画示例
2018/08/22 Javascript
微信小程序实现消息框弹出动画
2020/04/18 Javascript
微信小程序实现点击卡片 翻转效果
2019/09/04 Javascript
Django中反向生成models.py的实例讲解
2018/05/30 Python
python 批量修改/替换数据的实例
2018/07/25 Python
浅析Windows 嵌入python解释器的过程
2019/07/26 Python
详解Python中的format格式化函数的使用方法
2019/11/20 Python
关于python中plt.hist参数的使用详解
2019/11/28 Python
Opencv图像处理:如何判断图片里某个颜色值占的比例
2020/06/03 Python
Pytorch实现将模型的所有参数的梯度清0
2020/06/24 Python
深入浅析css3 中display box使用方法
2015/11/25 HTML / CSS
彪马美国官网:PUMA美国
2017/03/09 全球购物
LTD Commodities:礼品,独特发现,家居装饰,家用器皿
2017/08/11 全球购物
英国手机壳购买网站:Case Hut
2019/04/11 全球购物
销售经理工作职责
2014/02/03 职场文书
预备党员公开承诺书
2014/05/28 职场文书
身边的榜样活动方案
2014/08/20 职场文书
销售人员工作自我评价
2014/09/21 职场文书
大学生实习推荐信
2015/03/27 职场文书
小学教师师德师风承诺书
2015/04/28 职场文书
Vue3如何理解ref toRef和toRefs的区别
2022/02/18 Vue.js