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. Neo4j 第八篇:投射和过滤

    投射子句用于定义如何返回数据集,并可以对返回的表达式设置别名,而过滤子句用于对查询的结果集按照条件进行过滤 一,Return子句 使用return子句返回节点,关系和关系. 1,返回节点 MATCH ...

  2. 【JVM】【linux】linux上执行jmap命令查看JVM内存使用情况,报错:sun.jvm.hotspot.debugger.NoSuchSymbolException: Could not find symbol "gHotSpotVMTypes" in any of the known library name

    运行命令: jmap -heap 报错如下: Attaching to process ID , please wait... sun.jvm.hotspot.debugger.NoSuchSymbo ...

  3. EF 通过导航添加数据

    Fluent Api是指定模型与数据库表之间的对应关系 //一对多 this.HasOptional(x => x.主表).WithMany(x => x.多表).HasForeignKe ...

  4. Python基础9

    Anacanda软件内更新的方法,而不是每次重装整个软件, 整体更新,省时省力. 但仍要掌握单个包更新的方法.

  5. Gin-Go学习笔记五:Gin-Web框架 文件的操作

    文件的操作 1>     文件的创建,删除,写入内容,读取内容.(此实例使用的是text文件) 2>     Gin 并没有提供文件的创建,删除,读写这个操作的专门的接口,所以采用的是常用 ...

  6. uni-app通过判断接口403跳转登录页面的问题

    需求: 当向后端请求接口返回 403 的时候,直接跳到登录页面让用户登录 实现方案: 在请求结束后拦截器中判断,如果是 403 就跳转 遇到难题: 一级页面(我的) onShow() 中有接口请求,用 ...

  7. Kaldi语音识别快速入门

    一.简介 Kaldi是使用C++编写的语音识别工具包,Apache License v2.0许可.主要供语音识别研究人员使用.Kaldi的目标和范围与HTK类似.目标是拥有易于修改和扩展的现代而灵活的 ...

  8. 修改ceph的IP地址

    目录 修改步骤如下 1.导出mon配置 2.修改mon配置 3.修改ceph的配置文件 4.关闭ceph集群(建议将集群内的所有节点中的ceph都关闭) 5.修改服务器IP 6.导入修改后的mon 7 ...

  9. 设置进程的cpu亲和性

    在busybox中提供了一个名叫taskset的命令用于设置进程的cpu亲和性,让指定的进程或者程序在指定的cpu上面运行,该程序是通过调用sched_getaffinity和sched_setaff ...

  10. 快速生成mysql上百万条测试数据

    方案:编写一个存储过程循环添加数据 1. 创建表index_test DROP TABLE IF EXISTS index_test; CREATE TABLE index_test( id ) PR ...