宣传页面背景音乐

最新推荐文章于 2021-06-25 21:06:40 发布
最新推荐文章于 2021-06-25 21:06:40 发布
阅读量245 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_38992528/article/details/79085732
版权
<!Doctype html>
<html lang="en">


<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>Vision Master New Year's greeting</title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel="stylesheet" type="text/css" href="css/lib/reset.css"/>
<link rel="stylesheet" type="text/css" href="css/lib/swiper.min.css">
<link rel="stylesheet" type="text/css" href="css/lib/animate.min.css">
<link rel="stylesheet" type="text/css" href="css/index.css" />
</head>


<body>
<!--背景音乐-->
<audio style="display:none; height: 0" id="bg-music" preload="auto" src="../static/videos/bg-music.mp3" loop="loop"></audio>
<!--众多页面-->
<div class="swiper-container">
<div class="swiper-wrapper">
<!-------------slide1----------------->
<section class="swiper-slide">


<img src="upload/s1-t2.png" class="ani resize sli1_img1" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="1.5s">
<img src="upload/s1-t1.png" class="ani resize sli1_img2" swiper-animate-effect="bounceIn" swiper-animate-duration="0.5s" swiper-animate-delay="1s">
<img src="upload/flower.png" class="ani resize sli1_img3" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="0s">
<img src="upload/s1.png" class="ani resize sli1_img4" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s">


</section>
<!---------------slide2-------------->
<section class="swiper-slide">
<img src="upload/s2-i5.png" class="ani resize sli2_img1" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="2s">
<img src="upload/s2-i4.png" class="ani resize sli2_img2"  swiper-animate-effect="fadeInRight" swiper-animate-duration="0.5s" swiper-animate-delay="1.3s">
<img src="upload/s2-i3.png" class="ani resize sli2_img3" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="1s">
<img src="upload/s2-i2.png" class="ani resize sli2_img4"  swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">
<img src="upload/s2-i1.png" class="ani resize sli2_img5" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.5s" swiper-animate-delay="0s">


</section>
<!----------------slide3-------------->
<section class="swiper-slide">


<img src="upload/s3-i5.png" class="ani resize sli3_img1" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="2s">
<img src="upload/s3-i4.png" class="ani resize sli3_img2"  swiper-animate-effect="fadeInRight" swiper-animate-duration="0.5s" swiper-animate-delay="1.3s">
<img src="upload/s2-i3.png" class="ani resize sli3_img3"  swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="1s">
<img src="upload/s3-i2.png" class="ani resize sli3_img4" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">
<img src="upload/s2-i1.png" class="ani resize sli3_img5" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.5s" swiper-animate-delay="0s">


</section>
<!-------------slide4----------------->
<section class="swiper-slide">


<div class="ani resize sli4_div1" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="1s">
<div class="txt sli4_div11">
<p>愿您羊年运旺福旺</p>
<p>条条祝福给您送上</p>
<p>美丽花灯传递吉祥</p>
<p>圆圆汤圆味道芬芳</p>
</div>


</div>
<div class="ani resize sli4_div2" style="" swiper-animate-effect="fadeInRight" swiper-animate-duration="1s" swiper-animate-delay="1s">
<div class="txt sli4_div21">
元
<br>宵
<br>节
</div>
</div>
<img src="upload/flower.png" class="ani resize sli4_img1" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="0s">
<img src="upload/s1.png" class="ani resize sli4_img2" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s">


</section>
<!-------------slide5----------------->
<section class="swiper-slide">


<img src="upload/s1-t2.png" class="ani resize sli1_img1" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="1.5s">
<img src="upload/s1-t1.png" class="ani resize sli1_img2" swiper-animate-effect="bounceIn" swiper-animate-duration="0.5s" swiper-animate-delay="1s">
<img src="upload/flower.png" class="ani resize sli1_img3" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="0s">
<img src="upload/s1.png" class="ani resize sli1_img4" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s">


</section>
<!---------------slide6-------------->
<section class="swiper-slide">
<img src="upload/s2-i5.png" class="ani resize sli2_img1" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="2s">
<img src="upload/s2-i4.png" class="ani resize sli2_img2"  swiper-animate-effect="fadeInRight" swiper-animate-duration="0.5s" swiper-animate-delay="1.3s">
<img src="upload/s2-i3.png" class="ani resize sli2_img3" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="1s">
<img src="upload/s2-i2.png" class="ani resize sli2_img4"  swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">
<img src="upload/s2-i1.png" class="ani resize sli2_img5" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.5s" swiper-animate-delay="0s">


</section>
<!----------------slide7-------------->
<section class="swiper-slide">


<img src="upload/s3-i5.png" class="ani resize sli3_img1" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="2s">
<img src="upload/s3-i4.png" class="ani resize sli3_img2"  swiper-animate-effect="fadeInRight" swiper-animate-duration="0.5s" swiper-animate-delay="1.3s">
<img src="upload/s2-i3.png" class="ani resize sli3_img3"  swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="1s">
<img src="upload/s3-i2.png" class="ani resize sli3_img4" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">
<img src="upload/s2-i1.png" class="ani resize sli3_img5" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.5s" swiper-animate-delay="0s">


</section>
<!-------------slide8----------------->
<section class="swiper-slide">


<div class="ani resize sli4_div1" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="1s">
<div class="txt sli4_div11">
<p>愿您羊年运旺福旺</p>
<p>条条祝福给您送上</p>
<p>美丽花灯传递吉祥</p>
<p>圆圆汤圆味道芬芳</p>
</div>


</div>
<div class="ani resize sli4_div2" style="" swiper-animate-effect="fadeInRight" swiper-animate-duration="1s" swiper-animate-delay="1s">
<div class="txt sli4_div21">
元
<br>宵
<br>节
</div>
</div>
<img src="upload/flower.png" class="ani resize sli4_img1" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="0s">
<img src="upload/s1.png" class="ani resize sli4_img2" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s">


</section>


</div>


<img src="images/web-swipe-tip.png" id="array" class="resize slide_img">
<div class="swiper-pagination"></div>
</div>


</body>


</html>
<script src="js/base.js" type="text/javascript"></script>
<script src="js/fastclick.min.js" type="text/javascript" ></script>
<script src="js/touch.min.js" type="text/javascript"></script>
<script src="js/swiper.min.js"></script>
<script src="js/swiper.animate.min.js"></script>
<script type="text/javascript">
//swiper分页
var mySwiper = new Swiper('.swiper-container', {
direction: 'vertical',
pagination: '.swiper-pagination',
mousewheelControl: true,
onInit: function(swiper) {
swiperAnimateCache(swiper);
swiperAnimate(swiper);
},
onSlideChangeEnd: function(swiper) {
swiperAnimate(swiper);
}
})
//点击加速
if ('addEventListener' in document) {
document.addEventListener('DOMContentLoaded', function() {
FastClick.attach(document.body);
}, false);
}
//自动播放
//音乐自动播放
        $(document).ready(function(){
            autoPlayMusic();
            audioAutoPlay();
        });
        function audioAutoPlay() {
            var audio = document.getElementById('bg-music');
            audio.play();
            document.addEventListener("WeixinJSBridgeReady", function () {
                audio.play();
            }, false);
        }
        // 音乐播放
        function autoPlayMusic() {
            // 自动播放音乐效果，解决浏览器或者APP自动播放问题
            function musicInBrowserHandler() {
                musicPlay(true);
                document.body.removeEventListener('touchstart', musicInBrowserHandler);
            }
            document.body.addEventListener('touchstart', musicInBrowserHandler);
            // 自动播放音乐效果，解决微信自动播放问题
            function musicInWeixinHandler() {
                musicPlay(true);
                document.addEventListener("WeixinJSBridgeReady", function () {
                    musicPlay(true);
                }, false);
                document.removeEventListener('DOMContentLoaded', musicInWeixinHandler);
            }
            document.addEventListener('DOMContentLoaded', musicInWeixinHandler);
        }
       function musicPlay(isPlay) {
           var media = document.querySelector('#bg-music');
            if (isPlay && media.paused) {
                media.play();
            }
            if (!isPlay && !media.paused) {
                media.pause();
            }
        }




</script>
LinDaiuuj
关注
微信小程序 - 详细实现页面后台静默播放背景音乐播放音频效果，适合在页面右上角悬浮一个旋转音乐盒可随时让用户静音暂停，页面不会显示任何音乐播放器卡片、播放信息等，音乐碟片旋转背后播放歌曲在前台看不到！
王佳斌
03-24 2747
微信小程序，vue2，vue3，页面播放背景音乐，播放音频，页面背景音乐播放器控件，音乐盒，悬浮图标可静音，音频后台播放，背景音频，开启悬浮窗功能，北京播放，生日祝福H5页面带背景播放音乐，离开后背景音乐还是播放呢，ios静音状态下无声音、音频播放创建多个等问题，IOS真机无法播放声音，图标360旋转动画，点击静音和取消静音，活动页面，右上角挂载一个悬浮图片用来控制背景音乐的播放与暂停，音乐播放CD旋转效果，封面旋转，悬浮球，一进入页面就开始播放，后台播放，旋转，微信小程序后台播放音乐，页面离开切换暂停，w
微信小程序 - 详细实现页面后台静默播放背景音乐播放音频效果，页面不会显示任何音乐播放器卡片、播放信息等，适合在页面右上角悬浮一个旋转音乐盒可随时让用户暂停播放，音乐碟片旋转背后播放歌曲在前台看不到！
王佳斌
08-09 3832
微信小程序，vue2，vue3，页面播放背景音乐，播放音频，页面背景音乐播放器控件，音乐盒，图标360旋转动画，点击静音和取消静音，活动页面，右上角挂载一个悬浮图片用来控制背景音乐的播放与暂停，音乐播放CD旋转效果，封面旋转，悬浮球，一进入页面就开始播放，后台播放，旋转，微信小程序后台播放音乐，悬浮图标可静音，音频后台播放，背景音频，开启悬浮窗功能，北京播放，生日祝福H5页面带背景播放音乐，离开后背景音乐还是播放呢，ios静音状态下无声音、音频播放创建多个等问题，IOS真机无法播放声音，处理ios无法播放背
【黑客帝国-代码雨】超火（免费送）（17）
热门推荐
qq_42139049的博客
12-04 9万+
抖音超火：黑客帝国代码雨
微信html5加背景音乐代码,微信开发给网页页面添加背景音乐
weixin_30650059的博客
06-03 477
2015-05-21 16:10:23在微信开发中，单纯的页面展示并不能够吸引客户的眼球，需要有视觉和听觉的双重效果，才能够吸引住客户浏览，达到产品宣传的目的，前面说过很多页面的特效，今天我来说一种听觉上的效果，就是加上背景音乐，如何能够吸引住客户，那就需要你自己去选择合适的音乐了。废话不多说了，直接了看代码吧// JavaScript Documentvar audios = window["a...
Vue 爬坑之旅 -- 给页面加上背景音乐并直接播放
Alex_Zhao 的博客
08-29 4276
在很多的 H5 推广或者宣传页面都有背景音乐，并且基本上进入页面后背景音乐都是自动播放的，最近我也接到了这么一个需求（虽然我觉得这个需求很 Low，没什么必要，但架不住 PM 的硬性要求）。 要想在页面上播放背景音乐其实很简单，只需要一个 audio 标签即可，基本用法如下： <audio ref="audio" src="https://img.youpenglai.com/penglai...
经典而常用的配乐和背景音乐合集（下）
FL1623863129的博客
10-12 1万+
本合集资料参考网站：https://firc.gitee，微信公众号：未来自主研究中心，由于太多分为上下2个部分，此为下部分 2000、未来科技的积极进取科技感配乐.mp3 2001、机关枪声酒吧慢摇抖音配乐.mp3 2002、机关枪持续扫射的枪声.mp3 2003、机器猫经典轻快影视配乐.mp3 2004、李云迪 第二乐章《黄河颂》.mp3 2005、李志 再见.mp3 2006、来自天堂...
html加上音乐封面,如何在一个视频前加封面(片头) 以及配音乐, 视频如何同时加片头和背景音乐...
weixin_32955259的博客
06-03 448
如何给视频加片头相信大家都不陌生了，一个好的片头可以吸引观众的眼球，从而起到事半功倍的宣传效果，配上合适的背景音乐也能让视频的意境达到更完美的效果。如果原视频里面有人物说话声，怎么调整背景音乐的音量，不会盖过原视频的音量？今天为大家介绍视频片头制作软件，软件本身自带多种视频片头片尾素材，运用起来也是比较简单的，有兴趣的赶快跟着我看下去。相关教程阅读：效果预览:(很感人的小短片)废话不多说了，按照...
背景音乐与（消防）紧急广播的切换
weixin_34331102的博客
11-21 2558
关于背景音乐与（消防）紧急广播的切换目前，在新建或改扩建的大厦或公共娱乐场所，设计安装背景音乐系统，应该说是很普遍了,而作为火灾紧急情况下的紧急报警广播系统，则是依据《火灾自动报警系统设计规范》(GB50116-98)必须考虑安装的。这两个系统功能相近，为了节约开支，最大限度地利用相同功能的设备，越来越多的设计将这两个系统综合考虑，使之能够兼容实施。然而这种设备兼容的前提是：...
红色音乐五线谱PPT背景图片
07-16
在PPT背景中使用五线谱图案，可以直观地传达音乐元素，适合用于音乐教育、音乐会宣传、音乐理论讲解等场合。红色作为主色调，可能寓意激情、活力或节日氛围，使PPT更具有感染力和表现力。 音符背景图片和音乐背景...
红色音乐五线谱背景图片PPT模板
03-20
将两者结合，可以为PPT创建出一种强烈的音乐氛围，适合用于音乐教育、音乐会宣传或者音乐节相关的演示文稿。 描述部分提到该资源是一个.jpg格式的图片，这意味着它是一种常见的静态图像文件格式，广泛支持于各种...
炫彩背景音乐网页模板下载-紫色 炫彩 音乐 整站.rar
02-25
本资源“炫彩背景音乐网页模板下载-紫色 炫彩 音乐 整站.rar”正是这样一个工具，它包含了一套完整的网页设计，特别适用于创建富有音乐元素且视觉效果丰富的网站。 首先，我们要理解“模板”的概念。在网页设计中，...
古典音乐艺术ppt背景图片
10-19
此外，这些背景图片也可以用于音乐会宣传、音乐节介绍或是音乐欣赏课程的课件中，帮助传达音乐的美感和情感。 标签"ppt模版"表明这些资源是专为PowerPoint设计的，用户无需具备专业的设计技能，只需简单地将模板...
html+css+js网页设计-中国传统音乐调式宣传网站
05-06
html+css+js网页设计——中国传统音乐调式宣传网站 ...* 网站主题是《宫商角徵羽》——中国传统音乐调式宣传网站 ...导航栏为唐菖蒲红（#de1c31），页面背景颜色为淡米粉（#fbeee2），元素也选用了高粱红，玉红等颜色。
在视频背景前加字html,如何在一个视频前加封面(片头) 以及配音乐, 视频如何同时加片头和背景音乐...
weixin_36488589的博客
06-25 543
如何给视频加片头相信大家都不陌生了，一个好的片头可以吸引观众的眼球，从而起到事半功倍的宣传效果，配上合适的背景音乐也能让视频的意境达到更完美的效果。如果原视频里面有人物说话声，怎么调整背景音乐的音量，不会盖过原视频的音量？今天为大家介绍视频片头制作软件，软件本身自带多种视频片头片尾素材，运用起来也是比较简单的，有兴趣的赶快跟着我看下去。相关教程阅读：效果预览:(很感人的小短片)废话不多说了，按照...
基于SpringBoot仿天猫购物系统.zip(毕设&课设&实训&大作业&竞赛&项目)
09-20
项目工程资源经过严格测试可直接运行成功且功能正常的情况才上传，可轻松复刻，拿到资料包后可轻松复现出一样的项目，本人系统开发经验充足（全领域），有任何使用问题欢迎随时与我联系，我会及时为您解惑，提供帮助。 【资源内容】：包含完整源码+工程文件+说明（如有）等。答辩评审平均分达到96分，放心下载使用！可轻松复现，设计报告也可借鉴此项目，该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的。 【提供帮助】：有任何使用问题欢迎随时与我联系，我会及时解答解惑，提供帮助 【附带帮助】：若还需要相关开发工具、学习资料等，我会提供帮助，提供资料，鼓励学习进步 【项目价值】：可用在相关项目设计中，皆可应用在项目、毕业设计、课程设计、期末/期中/大作业、工程实训、大创等学科竞赛比赛、初期项目立项、学习/练手等方面，可借鉴此优质项目实现复刻，设计报告也可借鉴此项目，也可基于此项目来扩展开发出更多功能 下载后请首先打开README文件（如有），项目工程可直接复现复刻，如果基础还行，也可在此程序基础上进行修改，以实现其它功能。供开源学习/技术交流/学习参考，勿用于商业用途。质量优质，放心下载使用。
Python网络爬虫与推荐算法新闻推荐平台(毕设&课设&实训&大作业&竞赛&项目)
最新发布
09-20
Python网络爬虫与推荐算法新闻推荐平台：网络爬虫：通过Python实现新浪新闻的爬取，可爬取新闻页面上的标题、文本、图片、视频链接（保留排版） 推荐算法：权重衰减+标签推荐+区域推荐+热点推荐.zip项目工程资源经过严格测试可直接运行成功且功能正常的情况才上传，可轻松复刻，拿到资料包后可轻松复现出一样的项目，本人系统开发经验充足（全领域），有任何使用问题欢迎随时与我联系，我会及时为您解惑，提供帮助。 【资源内容】：包含完整源码+工程文件+说明（如有）等。答辩评审平均分达到96分，放心下载使用！可轻松复现，设计报告也可借鉴此项目，该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的。 【提供帮助】：有任何使用问题欢迎随时与我联系，我会及时解答解惑，提供帮助 【附带帮助】：若还需要相关开发工具、学习资料等，我会提供帮助，提供资料，鼓励学习进步 【项目价值】：可用在相关项目设计中，皆可应用在项目、毕业设计、课程设计、期末/期中/大作业、工程实训、大创等学科竞赛比赛、初期项目立项、学习/练手等方面，可借鉴此优质项目实现复刻，设计报告也可借鉴此项目，也可基于此项目来扩展开发出更多功能 下载后请首先打开README文件（如有），项目工程可直接复现复刻，如果基础还行，也可在此程序基础上进行修改，以实现其它功能。供开源学习/技术交流/学习参考，勿用于商业用途。质量优质，放心下载使用。
THUCNews数据集
09-20
THUCNews数据集
易企秀H5页面制作教程：添加背景音乐
在微信H5页面制作中，为你的作品添加背景音乐是一项重要的步骤，这能极大地提升用户的浏览体验。本教程将引导初学者如何简单有效地创建背景音乐。 首先，你可以从【音乐库】中选取官方提供的音乐素材。这些音乐通常...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值