前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >微信开发给网页页面添加背景音乐

微信开发给网页页面添加背景音乐

作者头像
OECOM
发布2020-07-02 10:02:06
6350
发布2020-07-02 10:02:06
举报
文章被收录于专栏:OECOMOECOM

在微信开发中,单纯的页面展示并不能够吸引客户的眼球,需要有视觉和听觉的双重效果,才能够吸引住客户浏览,达到产品宣传的目的,前面说过很多页面的特效,今天我来说一种听觉上的效果,就是加上背景音乐,如何能够吸引住客户,那就需要你自己去选择合适的音乐了。废话不多说了,直接了看代码吧

// JavaScript Document
var audios = window["audios"] || {};
audios = {
    aud:'',
	play : function () {
        var basePath = "music/";
		var mp3snd = "a.mp3";
		var mp3snd2 = "bg.wav";
		var bkcolor = "000000";
        
        if ( $("#bd_audio_1").length > 0 ) { 
            return false;
        }
        if(this.aud != ""){
            this.aud.play();
            return false;
        }

		if (navigator.userAgent.toLowerCase().indexOf("msie") != -1) {
			$("body").append('<bgsound id="bd_audio_1" src="' + basePath + mp3snd2 + '" loop="-1">');
		}else {
            this.aud = new Audio(); 
            this.aud.src =  basePath + mp3snd;
            this.aud.loop = "loop";
            this.aud.load();
            setTimeout(function(){
                audios.aud.play(); 
            },300);
            

		}
	},
    bdBtn : function(_DOM){/* 暂停的操作 */
        $(_DOM).attr("status",'1');
        $("div").delegate(_DOM, "touchstart", function(){
/*在这里使用的是touch事件,主要用于移动设备,如果你设置清除默认样式,那么久需要使用touch事件,如果没有,你可以将touchstart更改为click,如果不更改的话也可以正常实现点击事件,但是在pc端就会使鼠标点击失效。*/
            var st = $(this).attr("status");
            if(st == '1'){
                if (navigator.userAgent.toLowerCase().indexOf("msie") != -1) {
                    $("#bd_audio_1")[0].src="";
                }else{
                    audios.aud.pause(); /* 暂停 */
                    $(".music").find('img').attr("src",'images/music.png');/* 暂停的图片 ,music 是图片的class */
                }
                $(this).attr("status",'0');
            }else{
                $(this).attr("status",'1');
/* 播放的图片 */$(".music").find('img').attr("src",'images/music.gif');

                audios.play();/* 播放 */
                
            }
        });  
        
    },
    stop : function(){
        $(".jp-video-play-icon").live("touchstart",function(){
            
            if (navigator.userAgent.toLowerCase().indexOf("msie") != -1) {
                $("#bd_audio_1")[0].src="";
            }else{
                audios.aud.pause();
            }
         
        });

    }

};
$(document).ready(function () { /* 初始化 */
	audios.play();
	audios.bdBtn(".music");/* 点击的区域 */
});

这段js代码你可以将其封装成一个js文件,然后在html代码里引入就可以了,也可以直接写到html里,但这样会使html代码很长。

<div  class="music"><img  src="images/music.gif"></div><!-- 音乐 -->

html部分代码就这么一行,很好理解,再看一下他的css样式

.music{ width: 9%; height: 6%;  position: fixed; top:20px; right: 20px; border-radius:45px; background: #fff; box-shadow:0 0 30px #f8fb04; z-index:11111; }
			.music>img{ max-width:100%; max-height:100%; position: absolute; top: 3px; left: 0px;}

到这一步就大功告成了。

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2015-05-21,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档