{"id":3699,"date":"2015-05-13T16:03:55","date_gmt":"2015-05-13T21:03:55","guid":{"rendered":"https:\/\/bbn1.bbnradio.org\/english\/?page_id=3699"},"modified":"2024-01-22T09:28:21","modified_gmt":"2024-01-22T14:28:21","slug":"bbn-live-player-popup","status":"publish","type":"page","link":"https:\/\/bbn1.bbnradio.org\/german\/christliches-online-radio-ohne-werbung\/bbn-live-player-popup\/","title":{"rendered":"BBN Live Player Popup"},"content":{"rendered":"<div  class='avia-builder-widget-area clearfix  avia-builder-el-0  el_before_av_iconlist  avia-builder-el-first '><div id=\"custom_html-30\" class=\"widget_text widget clearfix widget_custom_html\"><div class=\"textwidget custom-html-widget\"><!DOCTYPE html>\r\n<html lang=\"en\">\r\n\r\n<head>\r\n    <meta charset=\"UTF-8\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n\t<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/sweetalert2@11\"><\/script>\r\n\t<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/i18next\/25.2.1\/i18next.min.js\"><\/script>\r\n\r\n    <style>\r\n        .myContainer {\r\n\r\n            margin-top: 0px !important;\r\n\r\n            padding-top: 10px !important;\r\n\r\n            margin-left: 10px !important;\r\n\r\n            margin-bottom: 50px !important;\r\n\r\n            position: relative;\r\n\r\n\r\n        }\r\n\r\n        .myButton {\r\n\r\n            position: absolute;\r\n\r\n            overflow: hidden;\r\n\r\n            background-color: #008852 !important;\r\n\r\n            border: solid 0px #008852;\r\n\r\n            border-radius: 16px;\r\n\r\n            width: 310px;\r\n\r\n            height: 75px;\r\n\r\n            cursor: pointer;\r\n\r\n            transition: all 0.7s !important;\r\n\r\n            text-align: center !important;\r\n\r\n\r\n        }\r\n\r\n\r\n\r\n        .myButton:hover {\r\n            background-color: #005f39 !important;\r\n\r\n            box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2),\r\n                0px 4px 5px 0px rgba(0, 0, 0, 0.14),\r\n                0px 1px 10px 0px rgba(0, 0, 0, 0.12);\r\n\r\n        }\r\n\r\n\r\n        #canvas {\r\n\r\n            width: 60px;\r\n\r\n            height: auto;\r\n\r\n            background-color: rgba(255, 255, 255, 0) !important;\r\n\r\n            margin: 33px 0 5px 40px !important;\r\n\r\n            z-index: 1 !important;\r\n\r\n            position: absolute;\r\n\r\n\r\n        }\r\n\r\n        svg {\r\n            transition: all 0.7s !important;\r\n\r\n        }\r\n\r\n        .slidecontainer {\r\n            visibility: hidden;\r\n            position: absolute;\r\n\r\n            margin: -5px 50px 5px 20px;\r\n            transition: all 0.5s;\r\n        }\r\n\r\n\r\n        .slider-slider-thumb {\r\n            -webkit-appearance: none;\r\n            appearance: none;\r\n            width: 18px;\r\n            height: 18px;\r\n            background: linear-gradient(#f00, #ff0);\r\n            cursor: pointer;\r\n        }\r\n\r\n        .slider::-webkit-slider-thumb {\r\n            -webkit-appearance: none;\r\n            appearance: none;\r\n            border-radius: 50%;\r\n\r\n            width: 18px;\r\n            height: 18px;\r\n            background: linear-gradient(#f00, #ff0);\r\n            cursor: pointer;\r\n        }\r\n\r\n        .slider::-moz-range-thumb {\r\n            border-radius: 50%;\r\n            width: 18px;\r\n            height: 18px;\r\n            background: linear-gradient(#f00, #ff0);\r\n            cursor: pointer;\r\n        }\r\n\r\n        input[type=\"range\"] {\r\n            -webkit-appearance: none;\r\n            appearance: none;\r\n            background: white !important;\r\n            border-radius: 16px;\r\n            cursor: pointer;\r\n            width: 85px;\r\n            height: 6px;\r\n\r\n\r\n        }\r\n\r\n        .pulse {\r\n            background-color: whitesmoke;\r\n            border-radius: 50%;\r\n            animation: pulse .8s ease-out;\r\n            opacity: 0.5;\r\n            transform: scale(0);\r\n            position: absolute;\r\n        }\r\n\r\n        @keyframes pulse {\r\n            to {\r\n                transform: scale(2);\r\n                background-color: whitesmoke;\r\n                opacity: 0;\r\n            }\r\n        }\r\n\r\n        @media (max-width: 767px) {\r\n            .slidecontainer {\r\n                display: none;\r\n            }\r\n        }\r\n    <\/style>\r\n\r\n<\/head>\r\n\r\n\r\n<body>\r\n    <div class=\"myContainer\" onmouseover=\"show('div1')\" onmouseout=\"hide('div1')\" onclick=\"togglePlay()\">\r\n        <button class=\"myButton\">\r\n\r\n            <span class=\"myIcons\">\r\n                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" height=\"74px\" viewbox=\"0 0 24 24\" width=\"74px\" fill=\"#FFFFFF\">\r\n                    <path d=\"M0 0h24v24H0z\" fill=\"none\" \/>\r\n                    <path\r\n                        d=\"M10 16.5l6-4.5-6-4.5v9zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z\" \/>\r\n                <\/svg>\r\n            <\/span>\r\n\r\n            <canvas id=\"canvas\"><\/canvas>\r\n\r\n        <\/button>\r\n\r\n\r\n    <\/div>\r\n\r\n    <div id=\"div1\" class=\"slidecontainer\" onmouseover=\"show('div1')\">\r\n\r\n        <input class=\"slider\" type=\"range\" min=\"1\" max=\"100\" value=\"80\">\r\n\r\n    <\/div>\r\n\r\n    <audio id=\"myAudio\" preload=\"none\" onplay=\"start()\"\r\n        src=\"https:\/\/streams.radiomast.io\/79ce8dd0-c0e9-4443-b887-0fdc1617f8bc\" crossorigin=\"anonymous\"\r\n        type=\"audio\/aac\">\r\n\r\n    <\/audio>\r\n\r\n    <script>\r\n\r\n\t\t\t window.addEventListener(\"offline\", offFunction);\r\n\r\n        function offFunction() {\r\nsetTimeout (() => {\r\n                alert('Es scheint, dass Sie offline sind. Bitte \u00fcberpr\u00fcfen Sie Ihre Internetverbindung und laden Sie Ihren Browser neu.');\r\n\t  window.location.reload();\r\n}, 2000);\r\n        }\r\n\t\t\t\r\n        let buttons = document.getElementsByClassName('myButton'),\r\n            forEach = Array.prototype.forEach;\r\n\r\n        forEach.call(buttons, function (b) {\r\n            b.addEventListener('click', addElement);\r\n        });\r\n\r\n\t\tvar POPtimerInterval = 0;\r\n\t\tvar i_POPtimerInterval = 14400000; \/\/30 seconds   14400000 4hours\r\n\t\tvar ASKtimerInterval;\r\n\t\tvar i_ASKtime;\r\n\r\n        function addElement(e) {\r\n            var addDiv = document.createElement('div'),\r\n                maxValue = Math.max(this.clientWidth, this.clientHeight),\r\n                rect = this.getBoundingClientRect(),\r\n                styleDiv = addDiv.style,\r\n                px = 'px';\r\n\r\n            styleDiv.width = styleDiv.height = maxValue + px;\r\n            styleDiv.left = e.clientX - rect.left - (maxValue \/ 2) + px;\r\n            styleDiv.top = e.clientY - rect.top - (maxValue \/ 2) + px;\r\n\r\n            addDiv.classList.add('pulse');\r\n            this.appendChild(addDiv);\r\n\t\t\tif (audio.paused) { \/\/2025-6-17\r\n\t\t\t\tclearTimeout(ASKtimerInterval);\r\n\t\t\t\tclearTimeout(POPtimerInterval);\r\n\t\t\t\tPOPtimerInterval = self.setTimeout(areYouStillListening, i_POPtimerInterval);\r\n\t\t\t}\r\n        }\r\n\t\tfunction areYouStillListening() {\r\n\t\t\tif (Swal.isVisible() || audio.paused == true) { \/\/2025-6-16 \u82e5\u5bf9\u8bdd\u6846\u663e\u793a\u4e2d,\u4e0d\u91cd\u590d\u663e\u793a.\u6216\u5f53\u524d\u5df2\u7ecf\u6682\u505c\u64ad\u653e,\u5c31\u4e0d\u663e\u793a\u5bf9\u8bdd\u6846\r\n\t\t\t\treturn; \/\/don't show if already visible or paused\r\n\t\t\t}\r\n\r\n\t\t\ti18next.init({\r\n\t\t\t\tlng: 'de', \/\/default language\r\n\t\t\t\tresources: {\r\n\t\t\t\t\ten: {\r\n\t\t\t\t\t\ttranslation: {\r\n\t\t\t\t\t\t\tpanel_title: \"Are you still listening?\",\r\n\t\t\t\t\t\t\tpanel_content: \"<h3>To help us manage streaming costs, please click below to continue listening. The stream will close in <b>15<\/b> seconds if there\u2019s no response.\",\r\n\t\t\t\t\t\t\tpanel_button: \"Yes, I'm still listening.\",\r\n\t\t\t\t\t\t},\r\n\t\t\t\t\t},\r\n\t\t\t\t\tes: {\r\n\t\t\t\t\t\ttranslation: {\r\n\t\t\t\t\t\t\tpanel_title: \" \u00bfA\u00fan sigue escuchando?\",\r\n\t\t\t\t\t\t\tpanel_content: \"Haga clic a continuaci\u00f3n para seguir escuchando, y as\u00ed ayudarnos a gestionar mejor los costos de transmici\u00f3n. La transmisi\u00f3n se cerrar\u00e1 en <b>15<\/b> segundos si no hay respuesta.\",\r\n\t\t\t\t\t\t\tpanel_button: \"S\u00ed, a\u00fan sigo escuchando.\",\r\n\t\t\t\t\t\t},\r\n\t\t\t\t\t},\r\n\t\t\t\t\tpt: {\r\n\t\t\t\t\t\ttranslation: {\r\n\t\t\t\t\t\t\tpanel_title: \"Voc\u00ea continua a ouvir?\",\r\n\t\t\t\t\t\t\tpanel_content: \"Para nos ajudar a gerenciar os custos de streaming, clique abaixo para continuar ouvindo.A transmiss\u00e3o ser\u00e1 encerrada em <b>15<\/b> segundos se n\u00e3o houver resposta.\",\r\n\t\t\t\t\t\t\tpanel_button: \"Sim, ainda estou ouvindo.\",\r\n\t\t\t\t\t\t},\r\n\t\t\t\t\t},\r\n\t\t\t\t\ttw: {\r\n\t\t\t\t\t\ttranslation: {\r\n\t\t\t\t\t\t\tpanel_title: \"\u60a8\u9084\u5728\u6536\u807d\u55ce\uff1f\",\r\n\t\t\t\t\t\t\tpanel_content: \"\u70ba\u4e86\u5e6b\u52a9\u6211\u5011\u7ba1\u7406\u4e32\u6d41\u6210\u672c\uff0c\u8acb\u9ede\u64ca\u4e0b\u65b9\u4ee5\u4fbf\u7e7c\u7e8c\u6536\u807d\u3002\u5982\u7121\u56de\u61c9\uff0c\u76f4\u64ad\u5c07\u5728 <b>15<\/b> \u79d2\u5f8c\u95dc\u9589\u3002\",\r\n\t\t\t\t\t\t\tpanel_button: \"\u662f\u7684\uff0c\u6211\u9084\u5728\u6536\u807d\u3002\",\r\n\t\t\t\t\t\t},\r\n\t\t\t\t\t},\r\n\r\n\t\t\t\t\tzh: {\r\n\t\t\t\t\t\ttranslation: {\r\n\t\t\t\t\t\t\tpanel_title: \"\u60a8\u8fd8\u5728\u6536\u542c\u5417\uff1f\",\r\n\t\t\t\t\t\t\tpanel_content: \"\u4e3a\u4e86\u5e2e\u52a9\u6211\u4eec\u7ba1\u7406\u6d41\u5a92\u4f53\u6210\u672c\uff0c\u8bf7\u70b9\u51fb\u4e0b\u9762\u7ee7\u7eed\u6536\u542c\u3002\u5982\u65e0\u56de\u5e94\uff0c\u76f4\u64ad\u5c06\u5728 <b>15<\/b> \u79d2\u540e\u5173\u95ed\u3002\",\r\n\t\t\t\t\t\t\tpanel_button: \"\u662f\u7684\uff0c\u6211\u8fd8\u5728\u6536\u542c\u3002\",\r\n\t\t\t\t\t\t},\r\n\t\t\t\t\t},\r\n\t\t\t\t\tjp: {\r\n\t\t\t\t\t\ttranslation: {\r\n\t\t\t\t\t\t\tpanel_title: \"\u307e\u3060\u304a\u8074\u304d\u306b\u306a\u3063\u3066\u3044\u307e\u3059\u304b\uff1f\",\r\n\t\t\t\t\t\t\tpanel_content: \"\u30b9\u30c8\u30ea\u30fc\u30df\u30f3\u30b0\u30b3\u30b9\u30c8\u306e\u7ba1\u7406\u306e\u305f\u3081\u3001\u7d9a\u3051\u3066\u8074\u304f\u5834\u5408\u306f\u4e0b\u306e\u30dc\u30bf\u30f3\u3092\u30af\u30ea\u30c3\u30af\u3057\u3066\u304f\u3060\u3055\u3044\u3002\u5fdc\u7b54\u304c\u306a\u3044\u5834\u5408\u3001\u30b9\u30c8\u30ea\u30fc\u30df\u30f3\u30b0\u653e\u9001\u306f<b>15<\/b>\u79d2\u5f8c\u306b\u7d42\u4e86\u3057\u307e\u3059\u3002\",\r\n\t\t\t\t\t\t\tpanel_button: \"\u306f\u3044\u3001\u307e\u3060\u8074\u3044\u3066\u3044\u307e\u3059\u3002\",\r\n\t\t\t\t\t\t},\r\n\t\t\t\t\t},\r\n\t\t\t\t\tkr: {\r\n\t\t\t\t\t\ttranslation: {\r\n\t\t\t\t\t\t\tpanel_title: \"\uacc4\uc18d \ub4e3\uace0 \uacc4\uc2e0\uac00\uc694?\",\r\n\t\t\t\t\t\t\tpanel_content: \"\uc2a4\ud2b8\ub9ac\ubc0d \ube44\uc6a9 \uc808\uc57d\uc744 \uc704\ud55c \uae30\ub2a5\uc785\ub2c8\ub2e4. \uacc4\uc18d \ub4e4\uc73c\uc2dc\ub824\uba74 \uc544\ub798\ub97c \ud074\ub9ad\ud574\uc8fc\uc138\uc694.\uc751\ub2f5\uc774 \uc5c6\uc73c\uba74 <b>15<\/b> \ucd08 \ud6c4\uc5d0 \uc2a4\ud2b8\ub9ac\ubc0d\uc774 \uc885\ub8cc\ub429\ub2c8\ub2e4.\",\r\n\t\t\t\t\t\t\tpanel_button: \"\ub124, \uacc4\uc18d \ub4e3\uace0 \uc788\uc2b5\ub2c8\ub2e4.\",\r\n\t\t\t\t\t\t},\r\n\t\t\t\t\t},\r\n\t\t\t\t\tde: {\r\n\t\t\t\t\t\ttranslation: {\r\n\t\t\t\t\t\t\tpanel_title: \"H\u00f6ren Sie noch zu?\",\r\n\t\t\t\t\t\t\tpanel_content: \"Um uns bei der Verwaltung der Streaming-Kosten zu helfen, klicken Sie bitte unten, um weiterhin zuzuh\u00f6ren.Der Stream wird in <b>15<\/b> Sekunden geschlossen, falls keine Antwort erfolgt.\",\r\n\t\t\t\t\t\t\tpanel_button: \"Ja, ich h\u00f6re weiterhin zu.\",\r\n\t\t\t\t\t\t},\r\n\t\t\t\t\t},\r\n\t\t\t\t\tru: {\r\n\t\t\t\t\t\ttranslation: {\r\n\t\t\t\t\t\t\tpanel_title: \"\u0412\u044b \u0432\u0441\u0451 \u0435\u0449\u0451 \u0441\u043b\u0443\u0448\u0430\u0435\u0442\u0435?\",\r\n\t\t\t\t\t\t\tpanel_content: \"\u0414\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043c\u043e\u0447\u044c \u043d\u0430\u043c \u0441 \u0437\u0430\u0442\u0440\u0430\u0442\u0430\u043c\u0438 \u043d\u0430 \u0441\u0442\u0440\u0438\u043c\u0438\u043d\u0433, \u043f\u043e\u0436\u0430\u043b\u0443\u0439\u0441\u0442\u0430, \u043d\u0430\u0436\u043c\u0438\u0442\u0435 \u043d\u0438\u0436\u0435, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0438\u0442\u044c \u043f\u0440\u043e\u0441\u043b\u0443\u0448\u0438\u0432\u0430\u043d\u0438\u0435. \u0415\u0441\u043b\u0438 \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u0432\u0435\u0442\u0430 \u0441 \u0432\u0430\u0448\u0435\u0439 \u0441\u0442\u043e\u0440\u043e\u043d\u044b, \u0432\u0435\u0449\u0430\u043d\u0438\u0435 \u043f\u0440\u0435\u043a\u0440\u0430\u0442\u0438\u0442\u0441\u044f \u0447\u0435\u0440\u0435\u0437 <b>15<\/b> \u0441\u0435\u043a\u0443\u043d\u0434. \",\r\n\t\t\t\t\t\t\tpanel_button: \"\u0414\u0430, \u044f \u0432\u0441\u0435 \u0435\u0449\u0435 \u0441\u043b\u0443\u0448\u0430\u044e.\",\r\n\t\t\t\t\t\t},\r\n\t\t\t\t\t},\r\n\r\n\t\t\t\t},\r\n\t\t\t})\r\n\r\n\t\t\tSwal.fire({\r\n\t\t\t\ticon: \"question\",\r\n\t\t\t\ticonColor: \"#00843d\",\r\n\t\t\t\t\/\/title: \"Are you still listening?\",\r\n\t\t\t\t\/\/confirmButtonText: \"Yes, I'm still listening.\",\r\n\t\t\t\t\/\/html: \"<h3>To help us manage streaming costs, please click below to continue listening. The stream will close in <b>15<\/b> seconds if there\u2019s no response.\",\r\n\t\t\t\t\/\/\"We pay for the stream, so we want to make sure you are still listening.<\/h3><h2>We will close stream in <b>15<\/b> seconds.<\/h2>\",\r\n\t\t\t\ttitle: i18next.t('panel_title'),\r\n\t\t\t\thtml: i18next.t('panel_content'),\r\n\t\t\t\tconfirmButtonText: i18next.t('panel_button'),\r\n\t\t\t\tconfirmButtonColor: \"#00843d\", \/\/\"#00a234\", \r\n\t\t\t\tshowconfirmButton: true,\r\n\t\t\t\tdraggable: true,\r\n\r\n\t\t\t\tdidOpen: () => {\r\n\t\t\t\t\tconst timer = Swal.getPopup().querySelector(\"b\");\r\n\t\t\t\t\tlet i_ASKtime = 15; \/\/reset countdown\r\n\t\t\t\t\tlet ASKtimerInterval = setTimeout(function tick() {\r\n\t\t\t\t\t\ttimer.textContent = `${i_ASKtime--}`;\r\n\t\t\t\t\t\tif (i_ASKtime == -1) {\r\n\t\t\t\t\t\t\tlet i_ASKtime = 100;\r\n\t\t\t\t\t\t\tclearTimeout(ASKtimerInterval);\r\n\t\t\t\t\t\t\tif (audio.paused == false && Swal.isVisible() == true) {\r\n\t\t\t\t\t\t\t\ttogglePlay();\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t} else if (i_ASKtime < i_ASKtime + 1) { \/\/16 seconds\r\n\t\t\t\t\t\t\tASKtimerInterval = setTimeout(tick, 1000); \/\/ (*)\t\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t}, 1000);\r\n\t\t\t\t},\r\n\t\t\t\twillClose: () => {\r\n\t\t\t\t\tclearTimeout(ASKtimerInterval);\r\n\t\t\t\t\tclearTimeout(POPtimerInterval);\r\n\t\t\t\t\tif (audio.paused == false) {\r\n\t\t\t\t\t\tPOPtimerInterval = self.setTimeout(areYouStillListening, i_POPtimerInterval);\r\n\t\t\t\t\t}\r\n\t\t\t\t},\r\n\r\n\t\t\t}).then((result) => {\r\n\t\t\t\tif (result.isConfirmed) {\r\n\t\t\t\t\tif (audio.paused) {\r\n\t\t\t\t\t\ttogglePlay();\r\n\t\t\t\t\t\tPOPtimerInterval = self.setTimeout(areYouStillListening, i_POPtimerInterval);\r\n\t\t\t\t\t} else {\r\n\t\t\t\t\t\tlet i_ASKtime = 100;\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t});\r\n\t\t}\r\n\r\n        const audio = document.getElementById('myAudio');\r\n\r\n        window.AudioContext = window.AudioContext || window.webkitAudioContext || window.mozAudioContext;\r\n\r\n        var start = function () {\r\n\r\n\r\n            var audioctx = new AudioContext();\r\n\r\n\r\n            var analyser = audioctx.createAnalyser();\r\n\r\n            var audioSrc = audioctx.createMediaElementSource(audio);\r\n\r\n\r\n            audioSrc.connect(analyser);\r\n\r\n            analyser.connect(audioctx.destination);\r\n\r\n            var frequencyData = new Uint8Array(analyser.frequencyBinCount);\r\n\r\n            var canvas = document.getElementById('canvas'),\r\n\r\n                cwidth = canvas.width,\r\n\r\n                cheight = canvas.height,\r\n\r\n                meterWidth = 10,\r\n\r\n                gap = 2,\r\n\r\n                capHeight = 2,\r\n\r\n                capStyle = '#fff',\r\n\r\n                meterNum = 800 \/ (10 + 2),\r\n\r\n                capYPositionArray = [];\r\n\r\n            ctx = canvas.getContext('2d'),\r\n\r\n                gradient = ctx.createLinearGradient(0, 0, 0, 300);\r\n\r\n            gradient.addColorStop(1, '#0f0');\r\n\r\n            gradient.addColorStop(0.5, '#ff0');\r\n\r\n            gradient.addColorStop(0, '#f00');\r\n\r\n\r\n\r\n            function renderFrame() {\r\n\r\n                var array = new Uint8Array(analyser.frequencyBinCount);\r\n\r\n                analyser.getByteFrequencyData(array);\r\n\r\n                var step = Math.round(array.length \/ meterNum); \/\/sample limited data from the total array\r\n\r\n                ctx.clearRect(0, 0, cwidth, cheight);\r\n\r\n                for (var i = 0; i < meterNum; i++) {\r\n\r\n                    var value = array[i * step];\r\n\r\n                    if (capYPositionArray.length < Math.round(meterNum)) {\r\n\r\n                        capYPositionArray.push(value);\r\n\r\n                    };\r\n\r\n                    ctx.fillStyle = capStyle;\r\n\r\n                    if (value < capYPositionArray[i]) {\r\n\r\n                        ctx.fillRect(i * 12, cheight - (--capYPositionArray[i]), meterWidth, capHeight);\r\n\r\n                    } else {\r\n\r\n                        ctx.fillRect(i * 12, cheight - value, meterWidth, capHeight);\r\n\r\n                        capYPositionArray[i] = value;\r\n\r\n                    };\r\n\r\n                    ctx.fillStyle = gradient; \/\/set the filllStyle to gradient for a better look\r\n\r\n                    ctx.fillRect(i * 12 \/*meterWidth+gap*\/, cheight - value + capHeight, meterWidth, cheight); \/\/the meter\r\n\r\n                }\r\n\r\n                requestAnimationFrame(renderFrame);\r\n\r\n            }\r\n\r\n            renderFrame();\r\n\r\n        };\r\n\r\n        function togglePlay() {\r\n\r\n            if (audio.paused) {\r\n\r\n                document.querySelector('[class=\"myIcons\"]').innerHTML = '<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" height=\"74px\" viewBox=\"0 0 24 24\" width=\"74px\" fill=\"#FFFFFF\"><path d=\"M0 0h24v24H0z\" fill=\"none\"\/><path d=\"M9 16h2V8H9v8zm3-14C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm1-4h2V8h-2v8z\"\/><\/svg>';\r\n\r\n                audio.play();\r\n\r\n            }\r\n\r\n            else {\r\n\r\n                document.querySelector('[class=\"myIcons\"]').innerHTML = '<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" height=\"74px\" viewBox=\"0 0 24 24\" width=\"74px\" fill=\"#FFFFFF\"><path d=\"M0 0h24v24H0z\" fill=\"none\"\/><path d=\"M10 16.5l6-4.5-6-4.5v9zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z\"\/><\/svg>';\r\n\r\n                audio.pause();\r\n\r\n            }\r\n\r\n        };\r\n\r\n        function show(id) {\r\n\r\n            setTimeout(() => {\r\n                document.getElementById(id).style.visibility = \"visible\";\r\n            }, 500);\r\n\r\n        }\r\n\r\n        function hide(id) {\r\n\r\n            setTimeout(() => {\r\n                document.getElementById(id).style.visibility = \"hidden\";\r\n            }, 500);\r\n\r\n        }\r\n\r\n        let volume = document.querySelector(\".slider\");\r\n        volume.addEventListener(\"change\", function (e) {\r\n            audio.volume = e.currentTarget.value \/ 100;\r\n        })\r\n\r\n\r\n        document.onkeyup = function (e) {\r\n\r\n            var audio = document.getElementById('myAudio');\r\n\r\n            if (e.which == 68 && 16) {\r\n\r\n                audio.volume -= 0.2;\r\n\r\n            } else if (e.which == 85 && 16) {\r\n\r\n                audio.volume += 0.2;\r\n\r\n            } else if (e.which == 83 && 16) {\r\n\r\n                audio.volume = 0.0;\r\n\r\n            }\r\n\r\n        };\r\n\r\n\r\n\r\n    <\/script>\r\n\r\n<\/body>\r\n\r\n<\/html><\/div><\/div><\/div>\n\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-95000z-77930b87705a068dcf563f50732f9922\">\n#top .avia-icon-list-container.av-95000z-77930b87705a068dcf563f50732f9922 .iconlist_icon{\ncolor:#003800;\nbackground-color:#ffffff;\nborder:1px solid #003800;\n}\n#top .avia-icon-list-container.av-95000z-77930b87705a068dcf563f50732f9922 .iconlist_icon svg:first-child{\nstroke:#003800;\nfill:#003800;\n}\n<\/style>\n<div  class='avia-icon-list-container av-95000z-77930b87705a068dcf563f50732f9922  avia-builder-el-1  el_after_av_sidebar  avia-builder-el-last '><ul class='avia-icon-list avia_animate_when_almost_visible avia-icon-list-left av-iconlist-big av-95000z-77930b87705a068dcf563f50732f9922 avia-iconlist-animate'>\n<li><a href='https://\/\/bbn1.bbnradio.org\/german\/home\/alle-programme\/?PHPSESSID=Zd0Pj-KafKZjR7f34UpML57-WVzt2smA' title='Programme'  target=\"_blank\"  rel=\"noopener noreferrer\" class='iconlist_icon av-5y94lv-2772b75d0b227a7189ecb37c31242c87 avia-font-entypo-fontello avia-iconfont avia-font-entypo-fontello'><span class='av-icon-char' data-av_icon='\ue84b' data-av_iconfont='entypo-fontello' aria-hidden=\"true\"><\/span><\/a><article class=\"article-icon-entry \"  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/CreativeWork\" ><div class=\"iconlist_content_wrap\"><header class=\"entry-content-header\" aria-label=\"Icon: &lt;a href=&#039;https:\/\/bbn1.bbnradio.org\/german\/home\/alle-programme\/&#039; title=&#039;Programme&#039; target=&quot;_blank&quot;  rel=&quot;noopener noreferrer&quot;&gt;Programme&lt;\/a&gt;\"><h4 class='av_iconlist_title iconlist_title  '  itemprop=\"headline\" ><a href='https://\/\/bbn1.bbnradio.org\/german\/home\/alle-programme\/?PHPSESSID=Zd0Pj-KafKZjR7f34UpML57-WVzt2smA' title='Programme' target=\"_blank\"  rel=\"noopener noreferrer\">Programme<\/a><\/h4><\/header><div class='iconlist_content '  itemprop=\"text\" ><p>Programme und Sendezeiten<\/p>\n<\/div><\/div><footer class=\"entry-footer\"><\/footer><\/article><div class=\"iconlist-timeline\"><\/div><\/li>\n<li><a href='https://\/\/bbn1.bbnradio.org\/german\/spenden\/?PHPSESSID=Zd0Pj-KafKZjR7f34UpML57-WVzt2smA' title='Jetzt spenden'  target=\"_blank\"  rel=\"noopener noreferrer\" class='iconlist_icon av-3ip4dv-3e60160ad157047326241e8427d511b7 avia-font-entypo-fontello avia-iconfont avia-font-entypo-fontello'><span class='av-icon-char' data-av_icon='\ue82b' data-av_iconfont='entypo-fontello' aria-hidden=\"true\"><\/span><\/a><article class=\"article-icon-entry \"  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/CreativeWork\" ><div class=\"iconlist_content_wrap\"><header class=\"entry-content-header\" aria-label=\"Icon: &lt;a href=&#039;https:\/\/bbn1.bbnradio.org\/german\/spenden\/&#039; title=&#039;Jetzt spenden&#039; target=&quot;_blank&quot;  rel=&quot;noopener noreferrer&quot;&gt;Jetzt spenden&lt;\/a&gt;\"><h4 class='av_iconlist_title iconlist_title  '  itemprop=\"headline\" ><a href='https://\/\/bbn1.bbnradio.org\/german\/spenden\/?PHPSESSID=Zd0Pj-KafKZjR7f34UpML57-WVzt2smA' title='Jetzt spenden' target=\"_blank\"  rel=\"noopener noreferrer\">Jetzt spenden<\/a><\/h4><\/header><div class='iconlist_content '  itemprop=\"text\" ><p>BBN wird von den Beitr\u00e4gen der Zuh\u00f6rer finanziert. Vielen Dank f\u00fcr Ihre Partnerschaft!<\/p>\n<\/div><\/div><footer class=\"entry-footer\"><\/footer><\/article><div class=\"iconlist-timeline\"><\/div><\/li>\n<li><a href='https://\/\/bbn1.bbnradio.org\/german\/kontakt\/?PHPSESSID=Zd0Pj-KafKZjR7f34UpML57-WVzt2smA' title='Kontakt'  target=\"_blank\"  rel=\"noopener noreferrer\" class='iconlist_icon av-22ajpv-4945ae9a8ff4eeb479feff206905b4f7 avia-font-entypo-fontello avia-iconfont avia-font-entypo-fontello'><span class='av-icon-char' data-av_icon='\ue805' data-av_iconfont='entypo-fontello' aria-hidden=\"true\"><\/span><\/a><article class=\"article-icon-entry av-iconlist-empty\"  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/CreativeWork\" ><div class=\"iconlist_content_wrap\"><header class=\"entry-content-header\" aria-label=\"Icon: &lt;a href=&#039;https:\/\/bbn1.bbnradio.org\/german\/kontakt\/&#039; title=&#039;Kontakt&#039; target=&quot;_blank&quot;  rel=&quot;noopener noreferrer&quot;&gt;Kontakt&lt;\/a&gt;\"><h4 class='av_iconlist_title iconlist_title  '  itemprop=\"headline\" ><a href='https://\/\/bbn1.bbnradio.org\/german\/kontakt\/?PHPSESSID=Zd0Pj-KafKZjR7f34UpML57-WVzt2smA' title='Kontakt' target=\"_blank\"  rel=\"noopener noreferrer\">Kontakt<\/a><\/h4><\/header><div class='iconlist_content '  itemprop=\"text\" ><\/div><\/div><footer class=\"entry-footer\"><\/footer><\/article><div class=\"iconlist-timeline\"><\/div><\/li>\n<\/ul><\/div>\n<!-- AddThis Advanced Settings generic via filter on the_content --><!-- AddThis Share Buttons generic via filter on the_content -->","protected":false},"excerpt":{"rendered":"<p><!-- AddThis Advanced Settings generic via filter on get_the_excerpt --><!-- AddThis Share Buttons generic via filter on get_the_excerpt --><\/p>\n","protected":false},"author":27,"featured_media":0,"parent":3373,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-3699","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.8 (Yoast SEO v24.8.1) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>BBN Radio jetzt h\u00f6ren<\/title>\n<meta name=\"description\" content=\"Die Liebe Christi, verk\u00fcndigt durch biblische Botschaften und beruhigende christliche Musik. BBN Radio jetzt h\u00f6ren\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/bbn1.bbnradio.org\/german\/christliches-online-radio-ohne-werbung\/bbn-live-player-popup\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"BBN Radio jetzt h\u00f6ren\" \/>\n<meta property=\"og:description\" content=\"Die Liebe Christi, verk\u00fcndigt durch biblische Botschaften und beruhigende christliche Musik. BBN Radio jetzt h\u00f6ren\" \/>\n<meta property=\"og:url\" content=\"https:\/\/bbn1.bbnradio.org\/german\/christliches-online-radio-ohne-werbung\/bbn-live-player-popup\/\" \/>\n<meta property=\"og:site_name\" content=\"BBN\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/BBNGerman\/\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-22T14:28:21+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"BBN Radio jetzt h\u00f6ren\" \/>\n<meta name=\"twitter:site\" content=\"@BBNDeutsch\" \/>\n<meta name=\"twitter:label1\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data1\" content=\"1\u00a0Minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/bbn1.bbnradio.org\/german\/christliches-online-radio-ohne-werbung\/bbn-live-player-popup\/\",\"url\":\"https:\/\/bbn1.bbnradio.org\/german\/christliches-online-radio-ohne-werbung\/bbn-live-player-popup\/\",\"name\":\"BBN Radio jetzt h\u00f6ren\",\"isPartOf\":{\"@id\":\"https:\/\/bbn1.bbnradio.org\/german\/#website\"},\"datePublished\":\"2015-05-13T21:03:55+00:00\",\"dateModified\":\"2024-01-22T14:28:21+00:00\",\"description\":\"Die Liebe Christi, verk\u00fcndigt durch biblische Botschaften und beruhigende christliche Musik. BBN Radio jetzt h\u00f6ren\",\"breadcrumb\":{\"@id\":\"https:\/\/bbn1.bbnradio.org\/german\/christliches-online-radio-ohne-werbung\/bbn-live-player-popup\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/bbn1.bbnradio.org\/german\/christliches-online-radio-ohne-werbung\/bbn-live-player-popup\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/bbn1.bbnradio.org\/german\/christliches-online-radio-ohne-werbung\/bbn-live-player-popup\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/bbn1.bbnradio.org\/german\/home\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"\u0421hristliches Radio h\u00f6ren\",\"item\":\"https:\/\/bbn1.bbnradio.org\/german\/christliches-online-radio-ohne-werbung\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"BBN Live Player Popup\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/bbn1.bbnradio.org\/german\/#website\",\"url\":\"https:\/\/bbn1.bbnradio.org\/german\/\",\"name\":\"BBN\",\"description\":\"BBN\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/bbn1.bbnradio.org\/german\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"BBN Radio jetzt h\u00f6ren","description":"Die Liebe Christi, verk\u00fcndigt durch biblische Botschaften und beruhigende christliche Musik. BBN Radio jetzt h\u00f6ren","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/bbn1.bbnradio.org\/german\/christliches-online-radio-ohne-werbung\/bbn-live-player-popup\/","og_locale":"de_DE","og_type":"article","og_title":"BBN Radio jetzt h\u00f6ren","og_description":"Die Liebe Christi, verk\u00fcndigt durch biblische Botschaften und beruhigende christliche Musik. BBN Radio jetzt h\u00f6ren","og_url":"https:\/\/bbn1.bbnradio.org\/german\/christliches-online-radio-ohne-werbung\/bbn-live-player-popup\/","og_site_name":"BBN","article_publisher":"https:\/\/www.facebook.com\/BBNGerman\/","article_modified_time":"2024-01-22T14:28:21+00:00","twitter_card":"summary_large_image","twitter_title":"BBN Radio jetzt h\u00f6ren","twitter_site":"@BBNDeutsch","twitter_misc":{"Gesch\u00e4tzte Lesezeit":"1\u00a0Minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/bbn1.bbnradio.org\/german\/christliches-online-radio-ohne-werbung\/bbn-live-player-popup\/","url":"https:\/\/bbn1.bbnradio.org\/german\/christliches-online-radio-ohne-werbung\/bbn-live-player-popup\/","name":"BBN Radio jetzt h\u00f6ren","isPartOf":{"@id":"https:\/\/bbn1.bbnradio.org\/german\/#website"},"datePublished":"2015-05-13T21:03:55+00:00","dateModified":"2024-01-22T14:28:21+00:00","description":"Die Liebe Christi, verk\u00fcndigt durch biblische Botschaften und beruhigende christliche Musik. BBN Radio jetzt h\u00f6ren","breadcrumb":{"@id":"https:\/\/bbn1.bbnradio.org\/german\/christliches-online-radio-ohne-werbung\/bbn-live-player-popup\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/bbn1.bbnradio.org\/german\/christliches-online-radio-ohne-werbung\/bbn-live-player-popup\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/bbn1.bbnradio.org\/german\/christliches-online-radio-ohne-werbung\/bbn-live-player-popup\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/bbn1.bbnradio.org\/german\/home\/"},{"@type":"ListItem","position":2,"name":"\u0421hristliches Radio h\u00f6ren","item":"https:\/\/bbn1.bbnradio.org\/german\/christliches-online-radio-ohne-werbung\/"},{"@type":"ListItem","position":3,"name":"BBN Live Player Popup"}]},{"@type":"WebSite","@id":"https:\/\/bbn1.bbnradio.org\/german\/#website","url":"https:\/\/bbn1.bbnradio.org\/german\/","name":"BBN","description":"BBN","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/bbn1.bbnradio.org\/german\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"}]}},"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/PgZlJB-XF","_links":{"self":[{"href":"https:\/\/bbn1.bbnradio.org\/german\/wp-json\/wp\/v2\/pages\/3699","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bbn1.bbnradio.org\/german\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/bbn1.bbnradio.org\/german\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/bbn1.bbnradio.org\/german\/wp-json\/wp\/v2\/users\/27"}],"replies":[{"embeddable":true,"href":"https:\/\/bbn1.bbnradio.org\/german\/wp-json\/wp\/v2\/comments?post=3699"}],"version-history":[{"count":3,"href":"https:\/\/bbn1.bbnradio.org\/german\/wp-json\/wp\/v2\/pages\/3699\/revisions"}],"predecessor-version":[{"id":16130,"href":"https:\/\/bbn1.bbnradio.org\/german\/wp-json\/wp\/v2\/pages\/3699\/revisions\/16130"}],"up":[{"embeddable":true,"href":"https:\/\/bbn1.bbnradio.org\/german\/wp-json\/wp\/v2\/pages\/3373"}],"wp:attachment":[{"href":"https:\/\/bbn1.bbnradio.org\/german\/wp-json\/wp\/v2\/media?parent=3699"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bbn1.bbnradio.org\/german\/wp-json\/wp\/v2\/categories?post=3699"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bbn1.bbnradio.org\/german\/wp-json\/wp\/v2\/tags?post=3699"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}