h5页面添加背景音乐
【需求】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页面添加背景音乐的更多相关文章
- 给H5页面添加百分比的进度条,精确度高
进度条样式地址:http://sandbox.runjs.cn/show/6vxbxjrf SVG圆环样式地址:http://sandbox.runjs.cn/show/3ho1qpe9 原理:由于H ...
- vue 页面 添加背景音乐
背景音乐 添加背景音乐 并有单击事件 循环播放 <template> <div id="page"> <div style="width ...
- h5 页面点击添加添加input框
h5 页面点击添加添加input框 前段时间有个需求,页面要能点击添加按钮控制input框的个数,当时感觉有点难,就没做,这两个又遇到了,没办法写了个简单的 效果图,加号增加,减号减少 直接上代码, ...
- H5页面背景音乐,C33 360°旋转效果
在做H5页面的时候,经常会需要用到背景音乐,比如电子贺卡.动态音乐相册等,右上角有个360°旋转的音乐图标,点击可以控制音乐是否播放,那这个效果是如何实现的呢?我现整理了一下代码: Demo 点击 ...
- 【干货】微信场景之H5页面制作免费工具大集合
营销代有手段出,各领风骚数百天.要说现在哪些营销方式最能传播,屡屡刷爆朋友圈的H5页面肯定就是首当其冲的,提到H5页面,就立马想到"围住神经猫",上线微信朋友圈3天的时间便创造了用 ...
- 自定义H5页面规范
查看详情页也可支持自定义H5页面,用来展示更多内容. 交互规范 分屏切换,支持横向和竖向,滑动指引需清晰 若详情页加载较慢,需设计loading页,给予用户友好的提示 如有视频,需在底部加上“建议在W ...
- 基于swiper的移动端H5页面,丰富的动画效果
概述 通过运用swiper插件,制作移动端上下整屏滑动的H5页面,用来宣传或者简单注册等,可以嵌套H5音乐或者视频. 详细 代码下载:http://www.demodashi.com/demo/119 ...
- 微信h5页面audio标签在ios下不能自动播放
背景介绍:在一个h5页面中,当用户提交表单到后台,后台返回的结果成功的话,开始自动播放背景音乐 出现的问题:在安卓手机上正常,iOS中没有反应 后来网上一番搜索后了解到时因为iOS不允许自动播放音乐, ...
- 移动端H5页面高清多屏适配方案
背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范 ...
随机推荐
- (转)为什么国外 MMORPG 中不采用自动寻路等功能?
不只是自动寻路,现在网游中的教学引导系统,辅助系统的功能强大程度,友好程度都可以说到了变态的程度,开发这些功能投入的资源甚至要超过游戏内容本身.究其原因,还是竞争越来越激烈,人心越来越浮躁,游戏商家为 ...
- 《Redis设计与实现》- 复制
在分布式系统中为了解决单点问题,通常会把数据复制多个副本部署到其他机器,满足故障恢复和负载均衡灯需求.Redis提供了复制功能,实现了相同数据多个副本,复制功能作是高可用Redis的基础,深入理解复制 ...
- ADSL_自动拨号源码(Delphi),已经测试通过
下载地址: http://files.cnblogs.com/lwm8246/ADSL_%E8%87%AA%E5%8A%A8%E6%8B%A8%E5%8F%B7.rar
- python中全局变量和局部变量
例1: a = 100 #定义全局变量a def test1(): print(a) #此处a为全局变量 def test2(a):#此处a为局部变量 print(a)#此处a为局部变量 test1( ...
- Python学习笔记:logging(日志处理)
在一个软件中,日志是可以说必不可少的一个组成部分,通常会在定位客户问题或者记录软件使用情况等场景中会用到.logging模板块是Python的一个内置标准库,用于实现对日志的控制输出,对于平常的日志输 ...
- POJ:3258-River Hopscotch
River Hopscotch Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 17740 Accepted: 7414 Desc ...
- 笔记-python-statement-with
笔记-python-statement-with 1. with语句 1.1. 基础使用案例 在开发时,经常使用with语句来打开文件: with open(‘a.txt’,’a+’, ...
- storm集群安装部署
安装步骤: 搭建Zookeeper集群: 安装Storm依赖库: 下载并解压Storm发布版本: 修改storm.yaml配置文件: 启动Storm各个后台进程. 1. 搭建Zookeeper集群 这 ...
- Hibernate---实体类注释简介
1.类级别注解 @Entity:映射实体类 @Entity(name="tableName") - 必须,注解将一个类声明为一个实体bean. 属性: name - 可选,对应数据 ...
- RandomAecessFile open failed: EISDIR (Is a directory)
今天下午搞断点续传,下载文件的时候,弄了一下,我把下载的文件命名为plug.jar.后来老是报错: open failed: EISDIR (Is a directory) 我烦了,两个小时啊,我操. ...