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); 



    }

  • 相关阅读:
    线程池中的scheduleAtFixedRate scheduleWithFixedDelay区别
    几道MySQL问题
    【SQL server 2012】复制数据库到另一台机器上
    LeetCode 98. 验证二叉搜索树
    深度学习知识点
    Graph Network Notes
    剑指 Offer 33. 二叉搜索树的后序遍历序列
    剑指 Offer 29. 顺时针打印矩阵
    LeetCode 54. 螺旋矩阵
    LeetCode 50. Pow(x, n)
  • 原文地址:https://www.cnblogs.com/jquery37/p/4643537.html
Copyright © 2011-2022 走看看