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. IDEA 设置: Live Templates 方法注释 注释模板编写

    IDEA: Live Templates 方法注释 注释模板编写: 打开IDEA开发工具进入设置找到Editor: File>>Setting>>Editor>>L ...

  2. 基于vue+springboot+docker网站搭建【七】制作后端spring-boot的docker镜像部署

    制作spring-boot的docker镜像并部署 一.下载后端项目:https://github.com/macrozheng/mall 二.修改mall-admin项目的配置文件 修改applic ...

  3. elasticsearch原理学习

    用es也差不多一年左右了,但是都是只会用,底层做了什么一窍不通,没有核心竞争力,循序渐进,一个一个攻破,理解的多了,读的多了,自然能力就上去了,es底层是基于lucene的,所以今天先从lucene下 ...

  4. 线上IIS应用程序池自动关闭

    事情的经过是这样的: 下午下班的铃声已经敲响,我已经整装待发.突然同事说某水司的微信公众号不能正常访问了.点击营业厅,直接提示Service Unavailable. 立马远程服务器查看,IIS微信公 ...

  5. Shell 编程 免交互 expect

    本篇主要写一些shell脚本免交互expect的使用. 概述 Expect是建立在tcl基础上的一个工具,Expect 是用来进行自动化控制和测试的工具.主要解决shell脚本中不可交互的问题. 安装 ...

  6. rz上传文件乱码

    问题 使用rz上传文件时,出现乱码,上传失败. 原因 文件中包含控制字符 解决方法 使用 rz -be -b:–binary  用binary的方式上传下载,不解释字符为ascii: -e:–esca ...

  7. Nginx 核心配置-自定义日志路径及清空日志注意事项

    Nginx 核心配置-自定义日志路径及清空日志注意事项 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.关于日志清空注意事项 1>.nginx服务写访问日志是基于acces ...

  8. Linux下远程连接MySQL数据库

    估计搞了一个多小时才把这个远程连接搞好.一台本地电脑,一台云服务器,都是linux系统. 步骤 在服务器端开启远程访问 首先进入mysql数据库,然后输入下面两个命令: grant all privi ...

  9. 对NetBackup 问题进行故障排除的步骤

    错误消息通常是指出哪里出现故障的手段.如果在界面上没有看到错误消息,但仍怀疑有问题,请检查报告和日志. NetBackup提供了各种报告和日志记录工具, 这些工具可提供错误消息,直接为您指出解决方案. ...

  10. PAT 乙级 1039.到底买不买 C++/Java

    题目来源 小红想买些珠子做一串自己喜欢的珠串.卖珠子的摊主有很多串五颜六色的珠串,但是不肯把任何一串拆散了卖.于是小红要你帮忙判断一下,某串珠子里是否包含了全部自己想要的珠子?如果是,那么告诉她有多少 ...