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



    }

  • 相关阅读:
    作业
    剑指Offer:链表中倒数第k个节点
    剑指Offer:反转链表
    剑指Offer:数值的整数次方
    剑指Offer:剪绳子Ⅰ和剪绳子Ⅱ
    剑指Offer:机器人的运动范围
    Linux下进程与线程的区别
    剑指Offer:调整数组顺序使奇数位于偶数前面
    剑指Offer:删除链表的节点
    剑指Offer:打印从1到最大的n位数
  • 原文地址:https://www.cnblogs.com/jquery37/p/4643537.html
Copyright © 2020-2023  润新知