vue添加背景音乐

vue添加背景音乐需要用到HTML中的<auto>标签

参考手册:http://www.w3school.com.cn/tags/html_ref_audio_video_dom.asp

 <audio :src="mus" class="media-audio" loop autoplay ref="MusicPlay"></audio>

mus: require("../assets/mus.wav"),  //使用的音频

/**
       * 暂停音乐并停止旋转
       */
      musicPause() {
        this.$refs.MusicPlay.pause();
        this.musicTF = true;
        if (this.interval !== null) {
          clearInterval(this.interval);
        }
      },

      /**
       * 播放音乐并开始旋转
       */
      musicPlay() {
        this.$refs.MusicPlay.play();
        this.musicTF = false
        this.countMusicNum();
      },

因为开始按钮在别的地方控制,所以用ref指向auto

原文地址:https://www.cnblogs.com/zouwangblog/p/11097564.html

时间: 2024-08-28 12:01:45

vue添加背景音乐的相关文章

h5页面添加背景音乐

[需求]h5页面添加背景音乐,支持微信.QQ.各种APP. [实现思路]1.通过audio标签,设置自动播放,是一种方法,但是此方法只适合微信.QQ,并不兼容我司的APP,需要主动触发下播放事件. 2.针对可以自动播放的渠道,通过this.audio.addEventListene监听playing事件,控制小喇叭的状态. [知识点]audio标签.addEventListener.classList [代码]封装了一个公共组件: 1 <template> 2 <div class=&q

Cocos2d-x开发中国象棋《十一》在游戏中添加背景音乐

在上一节中实现了悔棋,在这节将介绍如何在游戏中添加背景音乐 看一下效果: 实现思路: 当单击后游戏中播放背景音乐,并且背景音乐切换按钮由变成 当单击后停止播放背景音乐,并且背景音乐切换按钮由变成 当游戏进入后台后停止播放背景音乐 当游戏恢复后继续播放背景音乐 实现代码: 在SceneGame类中定义一个成员函数Voice(CCObject*)用于实现背景音乐的切换,Voice(CCObject*)中的代码 //播放背景音乐 void SceneGame::Voice(CCObject*) { s

Java添加背景音乐

最近有几个师妹找我给她们的Java期末作业添加背景音乐,很久不琢磨Java的我花费整晚才搞定,惭愧!在博客中记录下来,警示自己,也帮助一下大家. Java中可以通过AudioClip类来实现音乐播放,循环等操作.AudioClip支持的音乐格式有.wav..mid.AIFF.AU.RMF,但是格式要求相当严格.我用AudioClip播放我自己录的一段wav文件就没有声音,让我纠结了很久,最后才发现我的wav文件内容没有写文件尾,对于格式要求严格的AudioClip而言是无法识别的(这个问题困扰了

谷歌浏览器如何添加背景音乐

问题: 在网页中用下面两种方法添加网页背景音乐: 1.<bgsound src=image/pic/youmei.mp3 loop="infinite"> 2.<embed src="image/pic/youmei.mp3" ></embed> 这两种办法,在IE浏览器上都能顺利播放出背景音乐,但是在谷歌和火狐浏览器上没有背景音乐. 两种解决方案: 1.使用HTML5.0的标签: <audio src="imag

在网页中添加背景音乐

有两种添加背景音乐的方式分别用<bgsound>和<embed></embed>标签,当用<embed>插入背景音乐时可以设置宽度和高度为0,隐藏播放器.二者的参数如下: ■ <bgsound>: <bgsound> 是用来插入背景音乐,但只适用于 IE,其参数设定不多.如下 <bgsound src="your.mid"autostart=true loop=infinite> src="y

添加背景音乐由icon控制

标准按钮icons样式: http://fontawesome.io/icons/ <!--添加音乐播放器--><div  style="padding: 2em;TEXT-ALIGN: center;">    <audio id="myaudio" src="${path}/music/Jason Mraz - I'm Yours.mp3"  loop="false" hidden="

php页面添加背景音乐 控制停止/播放

php页面添加背景音乐 控制停止/播放 <!DOCTYPE html> <html> <head lang="zh-cn"> <meta charset="UTF-8"> <title></title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-sca

页面添加背景音乐以及注意事项

我们经常会在一些微信分享页面中看到页面的右上角,会有一个背景音乐的按钮.我们来看看,怎么来实现这样一个效果. 因为智能手机浏览器中多数都是webkit内核的,绝大部分的智能手机浏览器都是支持HTML5的:对于IOS和Android原生应用中的WebView控件也都是webkit内核且支持HTML5标准的.因此我们在添加背景音乐的时候,可以使用一个很方便的标签:<audio> 在移动平台使用<audio>的时候,多数情况是不需要你处理UI的,因为移动浏览器不会像web端一样添加一个默

005-unity3d 添加背景音乐、音效 以及 天空盒子

一.基础知识 1.项目中需要有AudioListener,播放器中播放的声音就是AudioListener组件坐在的位置听到的声音.默认AudioListener是放到Main Camera上.没有AudioListener的话是听不到声音的.一般默认就在摄像机上.2.把音乐拖到Assets中,选中要播放音乐的游戏对象(如果鸡叫.坦克爆炸等声音一般放到鸡.坦克这些游戏对象上,而背景音乐等则一般放到摄像机上),点击主菜单:Component→Audio→audio source 增加Audio组件