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 相关文章推荐
js 固定悬浮效果实现思路代码
Aug 02 Javascript
Javascript常用小技巧汇总
Jun 24 Javascript
JavaScript中函数(Function)的apply与call理解
Jul 08 Javascript
JS实现n秒后自动跳转的两种方法
Nov 30 Javascript
jquery实现自定义图片裁剪功能【推荐】
Mar 08 Javascript
JavaScript正则表达式简单实用实例
Jun 23 Javascript
JavaScript比较同一天的时间大小实例代码
Feb 09 Javascript
微信小程序Getuserinfo解决方案图解
Aug 24 Javascript
js指定日期增加指定月份的实现方法
Dec 19 Javascript
微信小程序实现用table显示数据库反馈的多条数据功能示例
May 07 Javascript
vue中监听返回键问题
Aug 28 Javascript
在Uni中使用Vue的EventBus总线机制操作
Jul 31 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
MVC模式的PHP实现
2006/10/09 PHP
PHP可变函数的使用详解
2013/06/14 PHP
CodeIgniter 完美解决URL含有中文字符串
2016/05/13 PHP
php使用glob函数遍历文件和目录详解
2016/09/23 PHP
Expandable &quot;Detail&quot; Table Rows
2007/08/29 Javascript
jquery ready(fn)事件使用介绍
2013/08/21 Javascript
JavaScript跨平台的开源框架NativeScript
2015/03/24 Javascript
基于jquery实现智能提示控件intellSeach.js
2016/03/17 Javascript
JavaScript通过HTML的class来获取HTML元素的方法总结
2016/05/24 Javascript
AngularJS基础 ng-href 指令用法
2016/08/01 Javascript
微信小程序中单位rpx和rem的使用
2016/12/06 Javascript
layer 刷新某个页面的实现方法
2019/09/05 Javascript
jQuery实现提交表单时不提交隐藏div中input的方法
2019/10/08 jQuery
Vue Router的手写实现方法实现
2020/03/02 Javascript
Vue-resource安装过程及使用方法解析
2020/07/21 Javascript
vue如何使用rem适配
2021/02/06 Vue.js
[04:13]2018国际邀请赛典藏宝瓶Ⅱ饰品一览
2018/07/21 DOTA
Python中http请求方法库汇总
2016/01/06 Python
Python 变量的创建过程详解
2019/09/02 Python
Django模板语言 Tags使用详解
2019/09/09 Python
如何利用Python开发一个简单的猜数字游戏
2019/09/22 Python
Python telnet登陆功能实现代码
2020/04/16 Python
Windows下Anaconda安装、换源与更新的方法
2020/04/17 Python
Python with语句用法原理详解
2020/07/03 Python
NEW LOOK官网:英国时装零售巨头之一,快时尚品牌
2017/01/11 全球购物
蔻驰法国官网:COACH法国
2018/11/14 全球购物
mysql的最长数据库名,表名,字段名可以是多长
2014/04/21 面试题
自我评价格式
2014/01/06 职场文书
投标人廉洁自律承诺书
2014/05/26 职场文书
精神文明建设标语
2014/06/16 职场文书
超市开业庆典活动策划方案
2014/09/15 职场文书
工作总结与自我评价
2014/09/18 职场文书
毕业证明模板
2015/06/19 职场文书
公司规章制度范本
2015/08/03 职场文书
详解Java七大阻塞队列之SynchronousQueue
2021/09/04 Java/Android
js判断两个数组相等的5种方法
2022/05/06 Javascript