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 相关文章推荐
ext jquery 简单比较
Apr 07 Javascript
js下关于onmouseout、事件冒泡的问题经验小结
Dec 09 Javascript
30个最好的jQuery 灯箱插件分享
Apr 25 Javascript
js实现双向链表互联网机顶盒实战应用实现
Oct 28 Javascript
禁止拷贝网页内容的js代码
Jan 22 Javascript
javascript动态添加checkbox复选框的方法
Dec 23 Javascript
jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法(附demo源码下载)
Feb 25 Javascript
vue之浏览器存储方法封装实例
Mar 15 Javascript
ES6入门教程之let、const的使用方法
Apr 13 Javascript
vue实现跨域的方法分析
May 21 Javascript
微信小程序实现点击生成随机验证码
Sep 09 Javascript
基于javascript原生判断DOM是否加载完毕
Oct 14 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
磨咖啡豆的密诀
2021/03/03 冲泡冲煮
PHP 遍历XP文件夹下所有文件
2008/11/27 PHP
PHP常用代码大全(新手入门必备)
2010/06/29 PHP
smarty模板判断数组为空的方法
2015/06/10 PHP
谈谈php对接芝麻信用踩的坑
2016/12/01 PHP
浅谈php中fopen不能创建中文文件名文件的问题
2017/02/06 PHP
15 个 JavaScript Web UI 库
2010/05/19 Javascript
javascript 闭包疑问
2010/12/30 Javascript
jQuery lazyLoad图片延迟加载插件的优化改造方法分享
2013/08/13 Javascript
js代码实现随机颜色的小方块
2015/07/30 Javascript
js性能优化技巧
2015/11/29 Javascript
JS中的hasOwnProperty()、propertyIsEnumerable()和isPrototypeOf()
2016/08/11 Javascript
jQuery+Ajax请求本地数据加载商品列表页并跳转详情页的实现方法
2017/07/12 jQuery
详解vue 实例方法和数据
2017/10/23 Javascript
微信小程序自定义底部导航带跳转功能
2018/11/27 Javascript
vue中根据时间戳判断对应的时间(今天 昨天 前天)
2019/12/20 Javascript
[01:03:38]2014 DOTA2国际邀请赛中国区预选赛5.21 CNB VS CIS
2014/05/22 DOTA
[01:10]为家乡而战!完美世界城市挑战赛全国总决赛花絮
2019/07/25 DOTA
使用Python发送邮件附件以定时备份MySQL的教程
2015/04/25 Python
python django使用haystack:全文检索的框架(实例讲解)
2017/09/27 Python
python按时间排序目录下的文件实现方法
2018/10/17 Python
利用python GDAL库读写geotiff格式的遥感影像方法
2018/11/29 Python
基于Python执行dos命令并获取输出的结果
2019/12/30 Python
python主要用于哪些方向
2020/07/05 Python
N.Peal官网:来自伦敦的高档羊绒品牌
2018/10/29 全球购物
捷克建筑材料网上商店:DEK.cz
2021/03/06 全球购物
七一党建活动方案
2014/01/28 职场文书
领导党性分析材料
2014/02/15 职场文书
大班开学家长寄语
2014/04/04 职场文书
2014高考励志标语
2014/06/05 职场文书
防灾减灾标语
2014/10/07 职场文书
房屋转让协议书
2014/10/18 职场文书
《中华上下五千年》读后感3篇
2019/11/29 职场文书
Spring整合Mybatis的全过程
2021/06/28 Java/Android
MySQL中JOIN连接的基本用法实例
2022/06/05 MySQL
鸿蒙3.0体验感怎么样? 鸿蒙3.0系统评测向
2022/08/14 数码科技