vue添加背景音乐需要用到HTML中的标签

参考手册:http://www.w3school.com.cn/tags/html_ref_audio_video_dom.asp

*在iOS端autoplay不会起作用,因为iOS系统屏蔽了页面加载自动播放之类,所以我们需要在页面加载的时候调用一次play方法,具体play方法放在哪里就随意了,因为我的页面有wx.ready方法所以我就放在那里了

<audio :src="mus" class="media-audio" loop autoplay ref="MusicPlay"></audio>

mus: require("../assets/mus.wav"),  //使用的音频

/**
* 暂停音乐并停止旋转
*/
musicPause() {
this.$refs.MusicPlay.pause();
this.musicTF = true;
}, /**
* 播放音乐并开始旋转
*/
musicPlay() {
this.$refs.MusicPlay.play();
this.musicTF = false
},

因为开始按钮在别的地方控制,所以用ref指向auto

vue添加背景音乐的更多相关文章

  1. vue 页面 添加背景音乐

    背景音乐 添加背景音乐 并有单击事件   循环播放 <template> <div id="page"> <div style="width ...

  2. h5页面添加背景音乐

    [需求]h5页面添加背景音乐,支持微信.QQ.各种APP. [实现思路]1.通过audio标签,设置自动播放,是一种方法,但是此方法只适合微信.QQ,并不兼容我司的APP,需要主动触发下播放事件. 2 ...

  3. Java代码添加背景音乐

    太心塞!弄了很久才终于把Java添加背景音乐实现了.不过还是很Happy! 这次介绍的办法,是只要一打开Java Application,便可直接听到背景音乐.代码保存,方便以后再次利用. packa ...

  4. QQ空间添加背景音乐

    QQ空间背景音乐方式 1.QQ音乐添加背景音乐一种是开通绿砖[有矿的忽略此条]2.QQ空间添加网络音乐的方法步骤:1.首先,需要先下载好想要音乐作为QQ空间背景音乐的歌曲文件(建议为MP3格式)[我这 ...

  5. 005-unity3d 添加背景音乐、音效 以及 天空盒子

    一.基础知识 1.项目中需要有AudioListener,播放器中播放的声音就是AudioListener组件坐在的位置听到的声音.默认AudioListener是放到Main Camera上.没有A ...

  6. vue添加页面键盘事件

    我司开发项目,用的是vue+elementUI,做登陆页面的时候,点击enter键的时候要实现和点击登陆按钮一样的功能,所以就百度了一下,于是一通百度之后,就在点击按钮上面直接添加了@keyup.en ...

  7. Vue添加请求拦截器

    一.现象 统一处理错误及配置请求信息 二.解决 1.安装 axios  , 命令: npm install axios --save-dev 2.在根目录的config目录下新建文件 axios.js ...

  8. 百度地图API示例:使用vue添加删除覆盖物

    1.index.html <script type="text/javascript" src="http://api.map.baidu.com/api?v=2. ...

  9. Unity 之 添加背景音乐 以及 Slider控制

    游戏音频分为背景音乐与环境音乐两种.Audio   Clip(音频剪辑)有四种音乐格式.MP3:适合较长音频,作为背景音乐.Ogg:适合较长音频,作为背景音乐.Wav:适合较短音频,作为环境音乐.Ai ...

随机推荐

  1. docker系列之二:构建docker容器

    1.创建在FlaskApp/app中创建Flask项目: 2.生成web项目所需的运行环境:pip3 freeze > ../requirements.txt 3.编辑Dockerfile: # ...

  2. C# 删除文件到回收站

    首先添加Microsoft.VisualBasic引用 程序中引用 Microsoft.VisualBasic.FileIO 来进行处理 Console.WriteLine("删除文件到回收 ...

  3. golang学习笔记 go 相关命令

    go build 命令一些可选项的用途和用法 在运行go build命令的时候,默认不会编译目标代码包所依赖的那些代码包.当然,如果被依赖的代码包的归档文件(*.a)不存在,或者源码文件有了变化,那么 ...

  4. golang学习笔记 --go test

    Go语言拥有一套单元测试和性能测试系统,仅需要添加很少的代码就可以快速测试一段需求代码. go test 命令,会自动读取源码目录下面名为 *_test.go 的文件,生成并运行测试用的可执行文件.输 ...

  5. tensorflow常用函数(二)

    一.变量相关的函数 1)tf.train.list_variables(ckpt_dir_or_file)    Returns list of all variables in the checkp ...

  6. PHP错误日志相关

    https://cloud.tencent.com/developer/article/1167951   php错误日志总结 https://cloud.tencent.com/developer/ ...

  7. 【开发工具】- Idea常用快捷键

    快捷键 Ctrl + shift + F 全局搜索 Ctrl + F 搜索 Ctrl + Z 后退 Ctrl + shift + Z 前进 Ctrl + Shift+E 最近更改的文件 Ctrl + ...

  8. 移动前端viewPort的那些事

    1.viewport简单说 一般来说,移动上的viewport都是大于浏览器窗口的,不同的设备有自己默认的viewport值(980px或1024px). 2.三个viewport的理解(layout ...

  9. c# datagridview导出Excel文件 问题

    今天vs2010c#开发做datagridview导出Excel文件时,发现一个问题,和大家探讨一下: 第一种方式:写流的方式 private void button_Excel_Click(obje ...

  10. MES助力伊利集团打造智慧工厂

    1.项目背景介绍 在国家政策和事业部.工厂的实际需求双重背景下,2016年7-9月期间,伊利集团信息部门.业务部门,先后与国内外领先的设备和咨询公司进行了智能制造.智慧工厂等话题的沟通交流,并组织实地 ...