zoukankan      html  css  js  c++  java
  • 页面添加背景音乐以及注意事项

    我们经常会在一些微信分享页面中看到页面的右上角,会有一个背景音乐的按钮。我们来看看,怎么来实现这样一个效果。

    因为智能手机浏览器中多数都是webkit内核的,绝大部分的智能手机浏览器都是支持HTML5的;对于IOS和Android原生应用中的WebView控件也都是webkit内核且支持HTML5标准的。因此我们在添加背景音乐的时候,可以使用一个很方便的标签:<audio> 

    在移动平台使用<audio>的时候,多数情况是不需要你处理UI的,因为移动浏览器不会像web端一样添加一个默认的UI,为了保险,你还是可以给你的<audio>添加  display:none;

    接下来我们来做一个假的按钮,用来操作<audio>的API,这里要注意<audio>提供的API都是DOM方法,如果你用zepto时注意转化成DOM对象。

    1 <audio src="music/xxx.mp3" id="music" autoplay="autoplay" loop="loop"></audio>
    2 
    3 <a href="javascript:void(0)" id="audioBtn" class="audioBtn off"></a>
     1 /*music*/
     2 var audioO = document.getElementById('music');
     3   $('#audioBtn').on('touchstart',function(){
     4     var $this = $(this);
     5     if(audioO.paused){
     6       audioO.play();
     7       $this.removeClass('off').addClass('on')
     8     }else{
     9       audioO.pause();
    10       $this.removeClass('on').addClass('off')
    11     }
    12   });

    这样,就实现了H5,背景音乐的添加。

  • 相关阅读:
    Python 数据驱动 unittest + ddt
    接口知识介绍
    python 爬虫
    python 接口测试(三)
    基于PCA和SVM的人脸识别系统-error修改
    二分查找算法
    JAVA中运用数组的四种排序方法
    [Matlab] Attempt to execute SCRIPT *** as a function
    第36讲 activityForResult
    第35讲 Activity入门和跳转
  • 原文地址:https://www.cnblogs.com/webARM/p/4265315.html
Copyright © 2011-2022 走看看