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. centos7.x下环境搭建(四)—redis安装

    redis介绍 redis是用C语言开发的一个开源的高性能键值对(key-value)数据库.它通过提供多种键值数据类型来适应不同场景下的存储需求,目前为止redis支持的键值数据类型如下字符串.列表 ...

  2. Prometheus 编写告警规则案例

    Prometheus 编写告警规则案例 注:确保alertmanager配置完毕! 1.创建编辑文件:vim /usr/local/prometheus/rules/node.yml # groups ...

  3. Redis(序)应用场景

    前言 在阅读了<大型网站技术架构:核心原理与案例分析>书后,稍微了解了Redis在大型网站架构中的应用场景和目的. 大型网站都是从小用户量,小流量的网站演变过来的,在小型网站的架构之初,L ...

  4. Golang 模块(Module)官方手册

    官方原文: https://github.com/golang/go/wiki/Modules Go 1.11包括此处建议的对版本模块的初步支持.模块是Go 1.11中的实验性加入功能,并计划纳入反馈 ...

  5. Celery简介以及Django中使用celery

    目录 Celery简介 消息中间件 任务执行单元 任务结果存储 使用场景 Celery的安装和配置 Celery执行异步任务 基本使用 延时任务 定时任务 异步处理Django任务 案例: Celer ...

  6. java自适应响应式 企业网站源码 SSM 生成静态化 手机 平板 PC

    java 企业网站源码 前后台都有 静态模版引擎, 代码生成器大大提高开发效率 系统介绍: 1.网站后台采用主流的 SSM 框架 jsp JSTL,网站后台采用freemaker静态化模版引擎生成ht ...

  7. MYSQL中IN,INSTR,FIND_IN_SET函数效率比较(转)

    今天写代码时前台传过来类似‘1,2,3,4,5,6’的字符串,这种情况直接用IN是无效的,需要把字符串分割成数组或者组装成列表,然后再利用mabatis的foreach函数 <select id ...

  8. MySql5.7配置文件my.ini 设置 my.ini文件路径

    mysql配置文件my-default.ini  my.ini修改后重启无效,原来是路径错了,记录一下: windows操作系统下: 1. 由于我们使用MySql 时,需要修改mysql 的 my.i ...

  9. 如何开发出成功的iOS应用(流程图)

    转自:http://mobile.51cto.com/hot-307342.htm 近来,肥沃的应用开发土壤不断孕育出一个个振奋人心的故事,成千上万的人都觊觎从这个机遇无限的领域中分一杯羹.虽然现在的 ...

  10. thinkphp5连接sql server

    我用的环境是phpstudy,php版本是5.6,thinkphp连接sql server 方法如下: 1.修改database.php文件里的数据库信息 2.进入php扩展目录.我的是“E:\php ...