页面添加H5声音图标

最新推荐文章于 2023-08-22 11:09:12 发布

深海少女

最新推荐文章于 2023-08-22 11:09:12 发布

阅读量1.2k

点赞数

本文链接：https://blog.csdn.net/JiangWak/article/details/65446492

版权

页面添加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>