【需求】h5页面添加背景音乐,支持微信、QQ、各种APP。

【实现思路】1、通过audio标签,设置自动播放,是一种方法,但是此方法只适合微信、QQ,并不兼容我司的APP,需要主动触发下播放事件。

      2、针对可以自动播放的渠道,通过this.audio.addEventListene监听playing事件,控制小喇叭的状态。

【知识点】audio标签、addEventListener、classList

【代码】封装了一个公共组件:

 <template>
<div class="music">
<audio src={{musicsrc}} id="Jaudio" class="media-audio" preload loop="loop" hidden="false"></audio>
<div class="icon"></div>
</div>
</template>
<script>
/* eslint-disable */
export default{
data() {
return {}
},
props: {
musicsrc: {}
},
methods: {
// 音乐背景
play() {
this.audio.play()
this.icon.classList.add('play');
this.icon.classList.remove('stop');
},
stop() {
this.audio.pause()
this.icon.classList.add('stop');
this.icon.classList.remove('play');
},
audioAutoPlay() {
this.audio.play();
var that=this;
//控制小喇叭的播放状态
this.audio.addEventListener("playing", function(){
that.icon.classList.add('play');
that.icon.classList.remove('stop');
});
this.audio.addEventListener("pause", function(){
that.icon.classList.add('stop');
that.icon.classList.remove('play');
});
document.addEventListener("WeixinJSBridgeReady", function () {
that.audio.play();
this.icon.classList.add('play');
this.icon.classList.remove('stop');
}, false);
this.icon.addEventListener("click", () => {
if (this.audio.paused) {
this.play()
} else {
this.stop()
}
}, false);
// 触发播放音乐效果,解决浏览器或者APP自动播放问题
document.addEventListener("touchstart", () => {
if(!this.isPlay) {
this.play();
this.isPlay = true;
}
}, false)
}, },
ready() {
this.audio = window.document.querySelector('.media-audio');
this.icon = window.document.querySelector('.icon');
this.audioAutoPlay();
}
}
</script>
<style rel="stylesheet/scss" lang="scss">
.music {
position:fixed;
z-index:1000;
top:50px;
right:20px; .icon{
width:60px;
height:50px;
background:url('https://pic.51zhangdan.com/u51/storage/dd/df9e5296-1fa9-f3c4-6151-afeab9c2f34d.png') no-repeat;
background-size: 100%;
&.play{
animation: 4s linear 0s normal none infinite rotate;
// animation-fill-mode:forwards;
// animation-play-state: running;
}
&.stop{
// animation: 4s linear 0s normal none infinite rotate;
// animation-fill-mode:forwards;
// animation-play-state: paused;
}
}
} @keyframes rotate{
from{transform:rotate(0deg)}
to{transform:rotate(360deg)}
}
</style>

组件调用:

 <template>
<bgmusic :musicsrc='musicbg'></bgmusic>
</template>
<script>
import bgmusic from '../../components/music/bgmusic.vue' export default {
data() {
return {
musicbg: "../../assets/music/musicbg.mp3",
}
}
} </script>

h5页面添加背景音乐的更多相关文章

  1. 给H5页面添加百分比的进度条,精确度高

    进度条样式地址:http://sandbox.runjs.cn/show/6vxbxjrf SVG圆环样式地址:http://sandbox.runjs.cn/show/3ho1qpe9 原理:由于H ...

  2. vue 页面 添加背景音乐

    背景音乐 添加背景音乐 并有单击事件   循环播放 <template> <div id="page"> <div style="width ...

  3. h5 页面点击添加添加input框

    h5 页面点击添加添加input框 前段时间有个需求,页面要能点击添加按钮控制input框的个数,当时感觉有点难,就没做,这两个又遇到了,没办法写了个简单的 效果图,加号增加,减号减少 直接上代码, ...

  4. H5页面背景音乐,C33 360°旋转效果

    在做H5页面的时候,经常会需要用到背景音乐,比如电子贺卡.动态音乐相册等,右上角有个360°旋转的音乐图标,点击可以控制音乐是否播放,那这个效果是如何实现的呢?我现整理了一下代码:  Demo  点击 ...

  5. 【干货】微信场景之H5页面制作免费工具大集合

    营销代有手段出,各领风骚数百天.要说现在哪些营销方式最能传播,屡屡刷爆朋友圈的H5页面肯定就是首当其冲的,提到H5页面,就立马想到"围住神经猫",上线微信朋友圈3天的时间便创造了用 ...

  6. 自定义H5页面规范

    查看详情页也可支持自定义H5页面,用来展示更多内容. 交互规范 分屏切换,支持横向和竖向,滑动指引需清晰 若详情页加载较慢,需设计loading页,给予用户友好的提示 如有视频,需在底部加上“建议在W ...

  7. 基于swiper的移动端H5页面,丰富的动画效果

    概述 通过运用swiper插件,制作移动端上下整屏滑动的H5页面,用来宣传或者简单注册等,可以嵌套H5音乐或者视频. 详细 代码下载:http://www.demodashi.com/demo/119 ...

  8. 微信h5页面audio标签在ios下不能自动播放

    背景介绍:在一个h5页面中,当用户提交表单到后台,后台返回的结果成功的话,开始自动播放背景音乐 出现的问题:在安卓手机上正常,iOS中没有反应 后来网上一番搜索后了解到时因为iOS不允许自动播放音乐, ...

  9. 移动端H5页面高清多屏适配方案

    背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范 ...

随机推荐

  1. (转)为什么国外 MMORPG 中不采用自动寻路等功能?

    不只是自动寻路,现在网游中的教学引导系统,辅助系统的功能强大程度,友好程度都可以说到了变态的程度,开发这些功能投入的资源甚至要超过游戏内容本身.究其原因,还是竞争越来越激烈,人心越来越浮躁,游戏商家为 ...

  2. 《Redis设计与实现》- 复制

    在分布式系统中为了解决单点问题,通常会把数据复制多个副本部署到其他机器,满足故障恢复和负载均衡灯需求.Redis提供了复制功能,实现了相同数据多个副本,复制功能作是高可用Redis的基础,深入理解复制 ...

  3. ADSL_自动拨号源码(Delphi),已经测试通过

    下载地址: http://files.cnblogs.com/lwm8246/ADSL_%E8%87%AA%E5%8A%A8%E6%8B%A8%E5%8F%B7.rar

  4. python中全局变量和局部变量

    例1: a = 100 #定义全局变量a def test1(): print(a) #此处a为全局变量 def test2(a):#此处a为局部变量 print(a)#此处a为局部变量 test1( ...

  5. Python学习笔记:logging(日志处理)

    在一个软件中,日志是可以说必不可少的一个组成部分,通常会在定位客户问题或者记录软件使用情况等场景中会用到.logging模板块是Python的一个内置标准库,用于实现对日志的控制输出,对于平常的日志输 ...

  6. POJ:3258-River Hopscotch

    River Hopscotch Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 17740 Accepted: 7414 Desc ...

  7. 笔记-python-statement-with

    笔记-python-statement-with 1.      with语句 1.1.    基础使用案例 在开发时,经常使用with语句来打开文件: with open(‘a.txt’,’a+’, ...

  8. storm集群安装部署

    安装步骤: 搭建Zookeeper集群: 安装Storm依赖库: 下载并解压Storm发布版本: 修改storm.yaml配置文件: 启动Storm各个后台进程. 1. 搭建Zookeeper集群 这 ...

  9. Hibernate---实体类注释简介

    1.类级别注解 @Entity:映射实体类 @Entity(name="tableName") - 必须,注解将一个类声明为一个实体bean. 属性: name - 可选,对应数据 ...

  10. RandomAecessFile open failed: EISDIR (Is a directory)

    今天下午搞断点续传,下载文件的时候,弄了一下,我把下载的文件命名为plug.jar.后来老是报错: open failed: EISDIR (Is a directory) 我烦了,两个小时啊,我操. ...