页面添加H5声音图标

来源：互联网发布：去日本带mac好吗编辑：程序博客网时间：2024/05/18 23:54

页面添加H5声音图标

界面悬浮在表面,更换播放器样式(后来根据需要没有设置悬浮)
界面告警每隔几秒报一次警,声音就响一次
同时要实现,如果不想报警/播放,实现关闭音乐效果

 <audio src="../../../voice/warn.wav" id="audio"></audio><img id='musicAudioPlayAndPause' onclick='playOrPaused(this);'src='../../../images/on.png' />

 var flagVoice = 1;//声音关闭状态为2,开启状态为1 $.ajax({                type: "POST",                url: wsurl + "/Api/WorkFlow/AlarmHandle/Fault/Get.asmx/ByStatus",                data: { DGId: DGId, token: token },                dataType: "json",                success: function (data) {                    if (!(["info"] in data)) {                        for (var i = 0; i < getJsonObjLength(data.Table) ; i++) {                            if (data.Table[i].HdStatus == 1) {                              ...                    setTimeout("GetCount(1)", 5000);                    //判断预警>0,执行响起警报声音                    if (flagVoice == 1) {                        if ($("#spanHdAlarm").text() > 0) {                            // initAudio();                            audio.play();                        } else {                            // do nothing                        }                    }                },                error: function () {                    ShowMsg('系统错误，请联系管理员。', "false");                }            });        }        //暂停或播放 声音        function playOrPaused(obj) {            if (flagVoice == 2) {                //audio.play();                flagVoice = 1;                document.getElementById("musicAudioPlayAndPause").setAttribute("src", "../../../images/on.png");                return;            } else if (flagVoice == 1) {                flagVoice = 2;                //audio.pause();                document.getElementById("musicAudioPlayAndPause").setAttribute("src", "../../../images/off.png")            }        }

参考网上写的自定义播放器代码

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <title></title>   <!-- <script src="http://api.map.baidu.com/api?v=2.0&ak=A9vxNPRWQDSg0GZqTZMRgzmb36lbNIS5" type="text/javascript"></script>-->    <style>            /*.focusBox {            background-image: url(css/ztreestyle/img/focusT.png);            animation-name: scaleout;            animation-duration: 1.5s;            animation-timing-function: cubic-bezier(0.65, 0.05, 0.36, 1);            animation-iteration-count: infinite;            width: 40px;            height: 40px;        }        .point {            width: 10px;            height: 10px;            border-radius:50%;            background-color:red;            z-index:100;        }*/        .point {            background-image: url(css/ztreestyle/img/point.png);            width: 35px;            height: 35px;        }        .focus{            background-image: url(css/ztreestyle/img/focuss.png);            animation-name: scaleout;            animation-duration: 1.5s;            animation-timing-function: cubic-bezier(0.65, 0.05, 0.36, 0.3);            animation-iteration-count: infinite;            width: 35px;            height: 4px;        }        @keyframes scaleout {            0% {                transform: scale(0.2);                opacity: 1;            }            100% {                transform: scale(2.0);                opacity: 0.8;            }        }    </style>    <style type="text/css">        /*#musicAudio {            width: 300px;            height: 50px;            font-size: 0px;            background-color: #F5F5DC;            border-radius: 10px;        }*/            #musicAudio * {                display: inline-block;                vertical-align: middle;                font-size: 14px;            }        #musicAudioPlayAndPause {            line-height: 50px;            width: 40px;            height: 40px;            margin: 5px 5px;        }        #musicAudioTime {            margin: 5px 5px;        }        #musicAudioProgress, #musicAudioProgressPar {            height: 25px;            -webkit-border-radius: 10px;        }        #musicAudioProgressPar {            width: 140px;            background-color: #F0FFFF;        }        #musicAudioProgress {            width: 0px;            background-color: #7FFFD4;        }    </style></head><body>    <div id="main" style="height:600px;width:800px;  margin:150px auto;background-color:#0094ff;">        <!--编辑自定义的播放器界面-->        <!--<audio src="img/testAudio1.mp3" id="audio"></audio>-->        <audio src="css/ztreestyle/6709.wav" id="audio"></audio>        <!--<audio controls="controls" id="audio">            <source src="css/ztreestyle/2036.wav " onclick="playOrPaused(this)" />        </audio>-->        <div id="musicAudio" style="position:absolute;">           <!-- <img id="musicAudioPlayAndPause" onclick="playOrPaused(this);" src="img/shutdown.ico" />-->            <!--<div id="musicAudioProgressPar">                <div id="musicAudioProgress"></div>            </div>-->            <!--<p id="musicAudioTime"><span id="currentTime">00:00</span><span>&#47;</span><span id="totalTime">12:00</span></p>-->        </div>    </div>    <script src="squareoverlay.js"></script>    <!--<script>        // 定义自定义覆盖物的构造函数        // 初始化地图        var map = new BMap.Map("main");        var point = new BMap.Point(116.40554, 39.915);        map.centerAndZoom(point, 15);        //开启鼠标滚轮缩放        map.enableScrollWheelZoom(true);        // 添加自定义覆盖物        var focusPoint = new MyFocus(map.getCenter());        map.addOverlay(focusPoint);    </script>-->    <!--用img表示播放暂停按钮的图标、进度条:由圆角的父DIV和用于改变宽度的子DIV构成，p元素:显示时间-->    <script type="text/javascript">    var audio ;    window.onload = function(){        initAudio();    }    var initAudio = function(){        //初始化页面        document.getElementById("musicAudio").innerHTML=        "<img id='musicAudioPlayAndPause'  onclick='playOrPaused(this);' src='css/ztreestyle/img/warn.png'/>" +        "<div id='musicAudioProgressPar'>"+        "<div id='musicAudioProgress'></div>"+        "</div>"+        "<p id='musicAudioTime'><span id='currentTime'>00:00</span><span>&#47;</span><span id='totalTime'>0:03</span></p>";        //初始化对象        audio = document.getElementById('audio');        //初始化  当前时间        getCurrentTime();        //初始化  总时间        var totalTime=parseInt(audio.duration/60);        var seconds=parseInt(audio.duration%60);        if(totalTime==0){            if(seconds>9){                totalTime="00:"+seconds;            }else{                totalTime="00:0"+seconds;            }        }else{            var totalTimePre,totalTimeNext;            if(totalTime>9){                totalTimePre=totalTime;            }else{                totalTimePre="0"+totalTime;            }            if(seconds>9){                totalTimeNext=seconds;            }else{                totalTimeNext="0"+seconds;            }            totalTime=totalTimePre+":"+totalTimeNext;        }        document.getElementById("totalTime").innerText=totalTime;    }    //更新进度条当前值    function updateProgressVal(){        var progressVal=audio.currentTime/audio.duration*140;        document.getElementById("musicAudioProgress").style.width=progressVal+"px";    }    //更新当前时间    function getCurrentTime(){        var currentTime=audio.currentTime;        var totalTime=parseInt(currentTime/60);        var seconds=parseInt(currentTime%60);        if(totalTime==0){            if(seconds>9){                totalTime="00:"+seconds;            }else{                totalTime="00:0"+seconds;            }        }else{            var totalTimePre,totalTimeNext;            if(totalTime>9){                totalTimePre=totalTime;            }else{                totalTimePre="0"+totalTime;            }            if(seconds>9){                totalTimeNext=seconds;            }else{                totalTimeNext="0"+seconds;            }            totalTime=totalTimePre+":"+totalTimeNext;        }        document.getElementById("currentTime").innerText=totalTime;    }    //暂停或播放    var progressTimer;    function playOrPaused(obj){        if(audio.paused){            audio.play();            progressTimer = window.setInterval(audioProgress, 100);            document.getElementById("musicAudioPlayAndPause").setAttribute("src","css/ztreestyle/img/on.png");            return;        }        audio.pause();        document.getElementById("musicAudioPlayAndPause").setAttribute("src", "css/ztreestyle/img/off.png")    }    function audioProgress(){        if(audio.currentTime <audio.duration){            if(audio.played){                //更新当前时间                getCurrentTime();                //更新进度条                updateProgressVal();            }        }else{            clearInterval(progressTimer);        }    }    </script></body></html>

0 0