zoukankan      html  css  js  c++  java
  • html5 -----audio标签

    在现在的公司上班需要做一个html5页面,上下可以滑动的,在页面上需要音乐,默认开始音乐播放,点击音乐标签后音乐停止。后来在项目开发中,遇到性能优化的问题,所以我建议大家以后在使用时不要直接在页面中使用audio标签

    例如:<audio src="/h5/a/bg.mp3" autoplay loop data-src="/h5/a/bg.mp3" id="musicall"></audio>

    这样不太好,页面预解析的时候就可以播放了,最后用JS在页面加载完成后添加

    window.onload = function(){
    var music = document.getElementById('u-globalAudio');
    var audio = document.createElement("audio");
    var music_img = document.getElementsByTagName('img')[0];
    audio.setAttribute('src', '/h5/a/bg.mp3');
    audio.setAttribute('data-src', '/h5/a/bg.mp3');
    audio.setAttribute('loop','');
    audio.setAttribute('autoplay','');
    audio.setAttribute('id','music1');
    music.appendChild(audio);
    var onOFF = true;
    //var audio = document.getElementById('music1');
    music_img.onclick = function(){
    if(audio!==null){
    //检测播放是否已暂停.audio.paused 在播放器播放时返回false.<span style="font-family: Arial, Helvetica, sans-serif;">在播放器暂停时返回true</span>

    if(!audio.paused)
    {
    audio.pause();// 这个就是暂停//audio.play();// 这个就是播放
    onOFF = false;
    }else{
    audio.play();
    onOFF = true;
    }
    }
    }
    //setTimeout("document.getElementById('musicall').src='/h5/a/bg.mp3'; ",3000); 



    }

  • 相关阅读:
    批处理读取INI文件
    重装操作系统的20条原则
    SATA串口硬盘Windows Vista系统驱动安装实录
    中国国家地理高清晰的PDF书籍系列经典珍藏版
    单一职责原则
    理解boost::bind的实参传递方式
    理解C++ dynamic_cast
    C# vs C++之三:静态构造函数
    TDD可以驱动设计吗?
    依赖注入与对象间关系
  • 原文地址:https://www.cnblogs.com/jquery37/p/4643537.html
Copyright © 2011-2022 走看看