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. ElasticSearch : High Rest Api 使用

    pom文件: <dependency> <groupId>org.elasticsearch.client</groupId> <artifactId> ...

  2. MD5加密方法HashPasswordForStoringInConfigFile(string,string)过时问题处理方法

    最近写代码的时候一直有一种很奇怪的感觉,查了一下发现原来是系统中的MD5加密方法报了过时的警告,虽然对系统没有任何影响,但是开发过程中绿色波浪线就像挥之不去的阴影一样.开发人员多多少少都会有点强迫症, ...

  3. vs2017 + mysql+ef 创建实体模型闪退问题

    =>:需要下载安装三个包 mysql和VS链接的驱动 vs2017推荐安装版本:mysql-connector-net-6.10.7.msi vs2015推荐安装版本: mysql-connec ...

  4. idea2019注册码

    都9012年了,怎么还能忍受用低版本的编辑器呢, IntelliJ IDEA 2019破解教程拿走不谢 下载工具 Mac版idea下载链接: 链接:https://pan.baidu.com/s/1m ...

  5. html、css/bootStrap、js/Jquery、ajax与json数据交互总结

    设计个个人网站,利用CSS.JavaScript.HTML5.jQuery库和AJAX等 实现网站各功能模块,下面介绍我设计的网站各大功能模块:  个人简历模块: 包涵个人基本信息(利用CSS的flo ...

  6. Android源码分析(十二)-----Android源码中如何自定义TextView实现滚动效果

    一:如何自定义TextView实现滚动效果 继承TextView基类 重写构造方法 修改isFocused()方法,获取焦点. /* * Copyright (C) 2015 The Android ...

  7. SAP里SE38设置模板

    经验丰富些的大佬们都会有一套自己的风格,比如report主程序里几个form,常见的fieldcat的宏定义,常见的一些数据定义等等. 1.使用事物代码SE38进入编辑器. 2.点击客户端最右下角的文 ...

  8. 定时任务突然中止,告警:Thread starvation or clock leap detected

    1.背景 定时任务告警信息如下: 02:38:24.112 [HikariPool-1 housekeeper] WARN  com.zaxxer.hikari.pool.HikariPool - H ...

  9. alpine基础镜像使用

    关于Alpine的相关知识,可以参考下边的链接 https://yeasy.gitbooks.io/docker_practice/content/cases/os/alpine.html 一. al ...

  10. MySQL数据物理备份之lvm快照

    使用lvm快照实现物理备份 优点: 几乎是热备(创建快照前把表上锁,创建完后立即释放) 支持所有存储引擎 备份速度快 无需使用昂贵的商业软件(它是操作系统级别的) 缺点: 可能需要跨部门协调(使用操作 ...