Anonymous Pens can't be embedded.
Edit on CodePen
{"__browser":{"device":"unknown_device","mobile":false,"name":"chrome","platform":"pc","version":"96"},"__constants":{},"__CPDATA":{"domain_iframe":"https://cdpn.io","environment":"production","host":"codepen.io","iframe_allow":"accelerometer; camera; encrypted-media; display-capture; geolocation; gyroscope; microphone; midi; clipboard-read; clipboard-write; web-share","iframe_sandbox":"allow-forms allow-modals allow-pointer-lock allow-popups allow-same-origin allow-scripts allow-top-navigation-by-user-activation allow-downloads allow-presentation"},"__graphql":{"data":{"data":null,"errors":[{"message":"Cannot return null for non-nullable field Query.sessionUser"}]},"url":"https://codepen.io/graphql","api":"cprails","cpedata":{"action":"show_preview","controller":"embed"}},"__pay_stripe_public_key":"pk_live_2GndomDfiklqpSNQn8FrGuwZSMIMzha7DkLJqlYe7IR0ihKAlKdiHg68JJc5eVPt68rzAjzAAVXcUwjySHRCsgjQQ00gtRBUFNH","__pay_braintree_env":"production","__boomboom":{"serve_url":"https://cdpn.io/cpe/boomboom","store_url":"https://codepen.io/cpe/boomboom/store"},"__pageType":"embed","__item":"{\"editor_settings\":{\"auto_run\":true,\"auto_save\":true,\"format_on_save\":false,\"indent_with\":\"spaces\",\"tab_size\":\"2\",\"id\":\"VoDkNZ\",\"autocomplete\":false,\"code_folding\":true,\"css_pre_processor\":\"none\",\"css_prefix\":\"neither\",\"css_starter\":\"neither\",\"emmet_active\":true,\"font_size\":\"14\",\"font_type\":\"system\",\"html_pre_processor\":\"none\",\"js_pre_processor\":\"none\",\"key_bindings\":\"normal\",\"line_numbers\":true,\"line_wrapping\":true,\"match_brackets\":true,\"snippets\":{\"markupSnippets\":{},\"stylesheetSnippets\":{}},\"theme\":\"twilight\"},\"hashid\":\"pRKreo\",\"itemType\":\"pen\",\"resources\":[],\"tags\":[],\"id\":12629497,\"user_id\":1,\"html\":\" <audio id=\\\"myAudio\\\" >\\n\\t\\t <source src=\\\"\\\" type=\\\"audio/mpeg\\\">\\n\\t </audio>\\n\\n\\t \\n <div class=\\\"play-btn-wrapper\\\">\\n <select class=\\\"customSurah form-control ddCountry styled-select\\\" id=\\\"surah\\\" name=\\\"surah\\\" onchange=\\\"getData($('#surah option:selected').val())\\\"><option value=\\\"1\\\">Al-Faatiha</option><option value=\\\"2\\\">Al-Baqara</option><option value=\\\"3\\\">Aal-i-Imraan</option><option value=\\\"4\\\">An-Nisaa</option><option value=\\\"5\\\">Al-Maaida</option><option value=\\\"6\\\">Al-An'aam</option><option value=\\\"7\\\">Al-A'raaf</option><option value=\\\"8\\\">Al-Anfaal</option><option value=\\\"9\\\">At-Tawba</option><option value=\\\"10\\\">Yunus</option><option value=\\\"11\\\">Hud</option><option value=\\\"12\\\">Yusuf</option><option value=\\\"13\\\">Ar-Ra'd</option><option value=\\\"14\\\">Ibrahim</option><option value=\\\"15\\\">Al-Hijr</option><option value=\\\"16\\\">An-Nahl</option><option value=\\\"17\\\">Al-Israa</option><option value=\\\"18\\\">Al-Kahf</option><option value=\\\"19\\\">Maryam</option><option value=\\\"20\\\">Taa-Haa</option><option value=\\\"21\\\">Al-Anbiyaa</option><option value=\\\"22\\\">Al-Hajj</option><option value=\\\"23\\\">Al-Muminoon</option><option value=\\\"24\\\">An-Noor</option><option value=\\\"25\\\">Al-Furqaan</option><option value=\\\"26\\\">Ash-Shu'araa</option><option value=\\\"27\\\">An-Naml</option><option value=\\\"28\\\">Al-Qasas</option><option value=\\\"29\\\">Al-Ankaboot</option><option value=\\\"30\\\">Ar-Room</option><option value=\\\"31\\\">Luqman</option><option value=\\\"32\\\">As-Sajda</option><option value=\\\"33\\\">Al-Ahzaab</option><option value=\\\"34\\\">Saba</option><option value=\\\"35\\\">Faatir</option><option value=\\\"36\\\">Yaseen</option><option value=\\\"37\\\">As-Saaffaat</option><option value=\\\"38\\\">Saad</option><option value=\\\"39\\\">Az-Zumar</option><option value=\\\"40\\\">Al-Ghaafir</option><option value=\\\"41\\\">Fussilat</option><option value=\\\"42\\\">Ash-Shura</option><option value=\\\"43\\\">Az-Zukhruf</option><option value=\\\"44\\\">Ad-Dukhaan</option><option value=\\\"45\\\">Al-Jaathiya</option><option value=\\\"46\\\">Al-Ahqaf</option><option value=\\\"47\\\">Muhammad</option><option value=\\\"48\\\">Al-Fath</option><option value=\\\"49\\\">Al-Hujuraat</option><option value=\\\"50\\\">Qaaf</option><option value=\\\"51\\\">Adh-Dhaariyat</option><option value=\\\"52\\\">At-Tur</option><option value=\\\"53\\\">An-Najm</option><option value=\\\"54\\\">Al-Qamar</option><option value=\\\"55\\\">Ar-Rahmaan</option><option value=\\\"56\\\">Al-Waaqia</option><option value=\\\"57\\\">Al-Hadid</option><option value=\\\"58\\\">Al-Mujaadila</option><option value=\\\"59\\\">Al-Hashr</option><option value=\\\"60\\\">Al-Mumtahana</option><option value=\\\"61\\\">As-Saff</option><option value=\\\"62\\\">Al-Jumu'a</option><option value=\\\"63\\\">Al-Munaafiqoon</option><option value=\\\"64\\\">At-Taghaabun</option><option value=\\\"65\\\">At-Talaaq</option><option value=\\\"66\\\">At-Tahrim</option><option value=\\\"67\\\">Al-Mulk</option><option value=\\\"68\\\">Al-Qalam</option><option value=\\\"69\\\">Al-Haaqqa</option><option value=\\\"70\\\">Al-Ma'aarij</option><option value=\\\"71\\\">Nooh</option><option value=\\\"72\\\">Al-Jinn</option><option value=\\\"73\\\">Al-Muzzammil</option><option value=\\\"74\\\">Al-Muddaththir</option><option value=\\\"75\\\">Al-Qiyaama</option><option value=\\\"76\\\">Al-Insaan</option><option value=\\\"77\\\">Al-Mursalaat</option><option value=\\\"78\\\">An-Naba</option><option value=\\\"79\\\">An-Naazi'aat</option><option value=\\\"80\\\">Abasa</option><option value=\\\"81\\\">At-Takwir</option><option value=\\\"82\\\">Al-Infitaar</option><option value=\\\"83\\\">Al-Mutaffifin</option><option value=\\\"84\\\">Al-Inshiqaaq</option><option value=\\\"85\\\">Al-Burooj</option><option value=\\\"86\\\">At-Taariq</option><option value=\\\"87\\\">Al-A'laa</option><option value=\\\"88\\\">Al-Ghaashiya</option><option value=\\\"89\\\">Al-Fajr</option><option value=\\\"90\\\">Al-Balad</option><option value=\\\"91\\\">Ash-Shams</option><option value=\\\"92\\\">Al-Lail</option><option value=\\\"93\\\">Ad-Dhuhaa</option><option value=\\\"94\\\">Ash-Sharh</option><option value=\\\"95\\\">At-Tin</option><option value=\\\"96\\\">Al-Alaq</option><option value=\\\"97\\\">Al-Qadr</option><option value=\\\"98\\\">Al-Bayyina</option><option value=\\\"99\\\">Az-Zalzala</option><option value=\\\"100\\\">Al-Aadiyaat</option><option value=\\\"101\\\">Al-Qaari'a</option><option value=\\\"102\\\">At-Takaathur</option><option value=\\\"103\\\">Al-Asr</option><option value=\\\"104\\\">Al-Humaza</option><option value=\\\"105\\\">Al-Fil</option><option value=\\\"106\\\">Quraish</option><option value=\\\"107\\\">Al-Maa'un</option><option value=\\\"108\\\">Al-Kawthar</option><option value=\\\"109\\\">Al-Kaafiroon</option><option value=\\\"110\\\">An-Nasr</option><option value=\\\"111\\\">Al-Masad</option><option value=\\\"112\\\">Al-Ikhlaas</option><option value=\\\"113\\\">Al-Falaq</option><option value=\\\"114\\\">An-Naas</option></select>\\n <div class=\\\"play-btn\\\"></div>\\n </div>\\n\\n\\t <div id=\\\"surah-wrapper\\\"></div>\",\"css\":\".play-btn {\\n background-image: url(\\\"../../../data/icons/cosmo-player/40/button_play_1-64.png\\\");\\n float: none;\\n font-size: 0 !important;\\n height: 50px;\\n margin: 15px auto;\\n padding: 5px 10px;\\n text-align: center;\\n width: 50px;\\n}\\nbody{float:right; direction:rtl;}\\nspan{padding:5px 10px; direction:rtl; text-align:right;\\n margin:5px 1px;\\nfont-size:20px}\\n.qplaying {\\n background: #f00 none repeat scroll 0 0;\\n}\\n\",\"js\":\" getData(1);\\n\\n function getData(id) {\\n //alert(id);\\n //Emty div\\n $(\\\"#surah-wrapper\\\").empty();\\n //surahNo = id;\\n\\n //console.log(surhaNo);\\n $.ajaxSetup({\\n cache: true,\\n jsonpCallback: 'quranData'\\n }); // define ajax setup \\n // Quran Text Type quran-uthmani | quran-simple | quran-simple-clean | quran-wordbyword\\n $.getJSON(\\\"http://api.globalquran.com/surah/\\\" + id + \\\"/quran-uthmani?key=api_key&jsoncallback=?\\\", {\\n format: \\\"jsonp\\\"\\n }, function(data) {\\n if (id > 1) {\\n $(\\\"<span class='qspan qspan-bsm'>\\\").html(\\\"بِسْمِ اللَّهِ الرَّحْمَٰنِ الرَّحِيمِ\\\").appendTo(\\\"#surah-wrapper\\\");\\n }\\n $.each(data.quran, function(i, by) {\\n $.each(by, function(verseNo, line) {\\n //$(\\\"<p>\\\").html('('+ line.surah+':'+line.ayah+') '+line.verse).appendTo(\\\"#surah-wrapper\\\");\\n $(\\\"<span class='qspan' id='\\\" + verseNo + \\\"'>\\\").html(line.verse + '<span class=\\\"qspan-ayahno\\\">(' + line.surah + ':' + line.ayah + ')</span>').appendTo(\\\"#surah-wrapper\\\");\\n });\\n });\\n });\\n }\\n\\n //Play Script & highlight script\\n var audioIndex = 0;\\n var countSpan = 0;\\n countSpan = $('#surah-wrapper').children().length;\\n\\n var surahNo = 1;\\n // var strCat = \\\"../audio/1/1.mp3,../audio/1/2.mp3,../audio/1/3.mp3,../audio/1/4.mp3,../audio/1/5.mp3,../audio/1/6.mp3,../audio/1/7.mp3\\\";\\n //var strCat = \\\"../audio/1/0.mp3,../audio/1/1.mp3,../audio/1/2.mp3,../audio/1/3.mp3,../audio/1/4.mp3,../audio/1/5.mp3,../audio/1/6.mp3\\\";\\n //console.log('strCat ' + strCat);\\n var strCat = \\\"http://download.quranicaudio.com/verses/Sudais/mp3/001001.mp3,http://download.quranicaudio.com/verses/Sudais/mp3/001002.mp3,http://download.quranicaudio.com/verses/Sudais/mp3/001003.mp3,http://download.quranicaudio.com/verses/Sudais/mp3/001004.mp3,http://download.quranicaudio.com/verses/Sudais/mp3/001005.mp3,http://download.quranicaudio.com/verses/Sudais/mp3/001006.mp3,http://download.quranicaudio.com/verses/Sudais/mp3/001007.mp3\\\";\\n\\n setPlayer();\\n\\n $('.customSurah').change(function() {\\n\\n $('.play-btn').css('display', 'none');\\n $aud.pause();\\n\\n surahNo = $('#surah option:selected').val();\\n\\n setTimeout(function() {\\n\\n countSpan = $('#surah-wrapper').children().length;\\n\\n var i = 0;\\n strCat = '';\\n\\n for (i = 0; i <= countSpan; i++) {\\n //i+=1;\\n console.log('countSpan' + countSpan);\\n console.log('surahNo' + surahNo);\\n\\n if (i == 0) {\\n strCat = \\\"http://download.quranicaudio.com/verses/Sudais/mp3/001001.mp3,\\\";\\n i += 1\\n }\\n console.log('i' + i);\\n if (i == countSpan) {\\n\\n if (surahNo == 1) {\\n\\n } else {\\n\\n // strCat += \\\"/audio/\\\" + surahNo + \\\"/\\\" + i + \\\".mp3\\\";\\n\\n if (i < 10) {\\n strCat += \\\"http://download.quranicaudio.com/verses/Sudais/mp3/00\\\" + surahNo + \\\"00\\\" + i + \\\".mp3,\\\";\\n }\\n\\n if (i > 9) { //strCat+=\\\"http://download.quranicaudio.com/verses/Sudais/mp3/00\\\"+surahNo+\\\"0\\\"+i+\\\".mp3,\\\";\\n }\\n if (i > 99) { //strCat+=\\\"http://download.quranicaudio.com/verses/Sudais/mp3/00\\\"+surahNo+i+\\\".mp3,\\\";\\n }\\n console.log(strCat);\\n }\\n } else {\\n //strCat += \\\"/audio/\\\" + surahNo + \\\"/\\\" + i + \\\".mp3,\\\";\\n if (i < 10) {\\n strCat += \\\"http://download.quranicaudio.com/verses/Sudais/mp3/00\\\" + surahNo + \\\"00\\\" + i + \\\".mp3,\\\";\\n }\\n\\n if (i > 9) { //strCat+=\\\"http://download.quranicaudio.com/verses/Sudais/mp3/00\\\"+surahNo+\\\"0\\\"+i+\\\".mp3,\\\";\\n }\\n if (i > 99) { //strCat+=\\\"http://download.quranicaudio.com/verses/Sudais/mp3/00\\\"+surahNo+i+\\\".mp3,\\\";\\n }\\n console.log(strCat);\\n }\\n }\\n if (surahNo == 1) {\\n strCat = null;\\n //strCat = \\\"../audio/1/1.mp3,../audio/1/2.mp3,../audio/1/3.mp3,../audio/1/4.mp3,../audio/1/5.mp3,../audio/1/6.mp3,../audio/1/7.mp3\\\";\\n strCat = \\\"http://download.quranicaudio.com/verses/Sudais/mp3/001001.mp3,http://download.quranicaudio.com/verses/Sudais/mp3/001002.mp3,http://download.quranicaudio.com/verses/Sudais/mp3/001003.mp3,http://download.quranicaudio.com/verses/Sudais/mp3/001004.mp3,http://download.quranicaudio.com/verses/Sudais/mp3/001005.mp3,http://download.quranicaudio.com/verses/Sudais/mp3/001006.mp3,http://download.quranicaudio.com/verses/Sudais/mp3/001007.mp3\\\";\\n\\n // console.log(strCat);\\n }\\n\\n // console.log($('#surah option:selected').val());\\n //console.log(strCat);\\n setPlayer();\\n $('.play-btn').css('display', 'block');\\n\\n }, 3000);\\n\\n });\\n\\n function setPlayer() {\\n\\n //reset values\\n audioIndex = 0;\\n countSpan = 0;\\n countSpan = $('#surah-wrapper').children().length;\\n\\n //var audioTracks = \\\"1/1.mp3,1/2.mp3,1/3.mp3, 1/4.mp3, 1/5.mp3,001/6.mp3,1/7.mp3\\\";\\n strCat = strCat.trim();\\n //var strMP3 = strCat.length;\\n var audioTracks = strCat;\\n // alert (audioTracks);\\n\\n //console.log(audioTracks.split(','));\\n\\n var audioAddress = audioTracks.split(',');\\n //console.log('audioAddress '+ audioAddress);\\n\\n //console.log('surahNo' + surahNo);\\n\\n var playing = false;\\n\\n $(function() {\\n\\n $aud = $(\\\"#myAudio\\\")[0];\\n $btn = $(\\\".play-btn\\\");\\n\\n function setAudio(index) {\\n $(\\\"#surah-wrapper > .qspan\\\").removeClass(\\\"qplaying\\\");\\n $aud.preload = 'auto';\\n $aud.src = audioAddress[index];\\n\\n }\\n\\n setAudio(audioIndex);\\n\\n $btn.click(function() {\\n if (playing) {\\n playing = false;\\n $aud.pause();\\n } else\\n $aud.play();\\n });\\n\\n $aud.onended = function() {\\n if (audioIndex < audioAddress.length - 1) {\\n audioIndex++;\\n setAudio(audioIndex);\\n $aud.play();\\n //console.log('surahNo' + surahNo);\\n //console.log('audioIndex' + audioIndex);\\n } else {\\n audioIndex = 0;\\n setAudio(audioIndex);\\n playing = false;\\n $btn.text(\\\"Play\\\");\\n }\\n };\\n\\n $aud.onpause = function() {\\n if (!playing) $btn.text(\\\"Play\\\");\\n $(\\\".play-btn\\\").css(\\\"background-image\\\", \\\"url(../../../data/icons/cosmo-player/40/button_play_1-64.png)\\\");\\n //if (playing) $btn.text(\\\"pause\\\")\\n //{\\n // $(\\\".play-btn\\\").css(\\\"background-image\\\", \\\"url(/images/play/qpause.png)\\\");\\n //}\\n\\n };\\n\\n $aud.onplay = function() {\\n $btn.text(\\\"Pause\\\");\\n $(\\\".play-btn\\\").css(\\\"background-image\\\", \\\"url(../../../data/icons/cosmo-player/40/button_pause_1-64.png)\\\");\\n playing = true;\\n $(\\\"#surah-wrapper > .qspan:nth-child(\\\" + (audioIndex + 1) + \\\")\\\").addClass(\\\"qplaying\\\");\\n // console.log('audioIndex' + audioIndex);\\n var wHeight = $(window).height();\\n //console.log('wHeight ' + wHeight);\\n var wHalfHeight = wHeight;\\n // var x = $(\\\".qplaying\\\").position();\\n var x = $(\\\".qplaying\\\").offset();\\n var curentSpanPosition = x.top;\\n //console.log('x.top ' + x.top);\\n //console.log('curentSpanPosition ' + curentSpanPosition);\\n wHalfHeight = wHalfHeight / 2;\\n //console.log('wHalfHeight ' + wHalfHeight);\\n if (curentSpanPosition > wHalfHeight) {\\n $('html, body').animate({\\n scrollTop: curentSpanPosition - 50\\n }, 1000);\\n }\\n\\n };\\n });\\n\\n }\",\"html_pre_processor\":\"none\",\"css_pre_processor\":\"none\",\"js_pre_processor\":\"none\",\"html_classes\":\"\",\"css_starter\":\"neither\",\"js_library\":null,\"created_at\":\"2017-02-05T10:07:14.000Z\",\"updated_at\":\"2017-02-05T10:07:14.000Z\",\"title\":\"\",\"description\":\"\",\"slug_hash\":\"pRKreo\",\"head\":\"\",\"private\":false,\"has_animation\":true,\"team_id\":0,\"css_prefix\":\"neither\",\"template\":false,\"parent_id\":null,\"comments_count\":0,\"custom_screenshot_filename\":null,\"loves_count\":0,\"pick\":false,\"popularity_score\":0,\"views_count\":0,\"pick_visible_at\":\"2022-11-08T22:42:57.485Z\",\"pen_hash\":null}","__jwt":"eyJhbGciOiJIUzI1NiJ9.eyJjbGFpbXMiOnsidXNlcl9pZCI6MX0sImV4cCI6MTY2ODE1ODM0NH0.pXGLu5LP1Tg7Yg5Ju4An2_oFjLoCdiE-uz28sGJQmns","__processorsMap":{"autoprefixer":"autoprefixer-10","babel":"babel-7","coffeescript":"coffeescript-2","format-1":"format-1","flutter":"flutter-1","haml":"haml-4","less":"less-3","lint-1":"lint-1","livescript":"livescript-1","markdown":"markdown-11","postcss":"postcss-7","pug":"pug-2","sass":"sass-1","scss":"sass-1","sass-ruby-3":"sass-ruby-3","sass-ruby-compass-3":"sass-ruby-compass-3","slim":"slim-3","stylus":"stylus-0","typescript":"typescript-4","vue":"vue-2","vue3":"vue-3"},"__favicon_mask_icon":"https://cpwebassets.codepen.io/assets/favicon/logo-pin-8f3771b1072e3c38bd662872f6b673a722f4b3ca2421637d5596661b4e2132cc.svg","__favicon_shortcut_icon":"https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico","__path_to_iframe_console_runner":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeConsoleRunner-6bce046e7128ddf9391ccf7acbecbf7ce0cbd7b6defbeb2e217a867f51485d25.js","__path_to_iframe_refresh_css":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeRefreshCSS-550eae0ce567d3d9182e33cee4e187761056020161aa87e3ef74dc467972c555.js","__path_to_iframe_runtime_errors":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeRuntimeErrors-4f205f2c14e769b448bcf477de2938c681660d5038bc464e3700256713ebe261.js","__path_to_processor_worker":"https://cpwebassets.codepen.io/assets/packs/router.js","__path_to_stop_execution_on_timeout":"https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-2c7831bb44f98c1391d6a4ffda0e1fd302503391ca806e7fcc7b9b87197aec26.js","__pen_normalize_css_url":"https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css","__pen_prefix_free_url":"https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js","__pen_reset_css_url":"https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"}