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. JAVA设计模式工厂模式

    工厂模式: – 实现了创建者和调用者的分离. – 详细分类: • 简单工厂模式 • 工厂方法模式 • 抽象工厂模式• 面向对象设计的基本原则: – OCP(开闭原则,Open-Closed Princ ...

  2. Git remote: ERROR: missing Change-Id in commit message

    D:\code\项目仓库目录>git push origin HEAD:refs/for/dev/wangteng/XXXXX key_load_public: invalid format E ...

  3. 开发技术-IPython介绍

    开发技术-IPython介绍 IPython是交互式的Python命令行,希望大家喜欢. 最近在回顾之前学习的内容,并且继续学习新的知识.这种自身的感觉,很不一般,有太多的感想产生.希望自己可以坚持将 ...

  4. 【案例】电子生产中的排程问题如何解决?APS助力智能化排产

    共进电子是典型的消费类电子制造企业,以ODM业务为主,立足双O(OEM/ODM),发展自主品牌.其中,生产模式特点包括: 批量制造.多品种小批量.面向订单生产: 产品结构复杂,设计变更频繁:生产计划复 ...

  5. 《Android开发艺术探索》读书笔记之IntentFillter的匹配规则

    使用intent启动不同组件的方法 组件类型 启动方法 Activity startActivity(Intent intent) startActivityForResult(Intent inte ...

  6. Android Okhttp POST提交键值对

    以前的项目网络连接那块一直坚持使用HttpClient,总是会出现一些莫名奇妙的问题,现在新的项目使用了OKHttp网络框架,发现超级好用,上网再了解下,发现OkHttp口碑真的不错,对比之下Http ...

  7. 第一篇 Scrum 冲刺博客

    一.各个成员在 Alpha 阶段认领的任务 姓名 Alpha 阶段认领的任务 林剑峰 用户信息页面:完成用户信息的上传 石竞贤 发布信息页面:完成用户图片上传云存储的功能,并且把发布信息上传到云数据库 ...

  8. elasticsearch组合多条件查询实现restful api以及java代码实现

    原文:http://blog.java1234.com/blog/articles/372.html elasticsearch组合多条件查询实现restful api以及java代码实现 实际开发中 ...

  9. SqlServer数据库之递归

    递归的实现比较简单,这里就直接贴SQL了. --简单创建一个用户表 CREATE TABLE User( UserID ,) , ParentUserID INT ) 假设这张有几千条数据,开始递归它 ...

  10. MySQL修炼之路二

    1. 表字段的操作 1. 语法: alter table 表名 执行动作: 2. 添加字段(add) alter table 表名 add 字段名 数据类型: alter table 表名 add 字 ...