Sample Video Item Type<\/title>\r\n <meta charset='utf-8'>\r\n <style type=\"text\/css\">\r\n header {\r\n height: 70px;\r\n }\r\n\r\n .main-controls {\r\n padding-bottom: 0.7rem;\r\n height: 170px;\r\n }\r\n\r\n .sound-clips {\r\n box-shadow: inset 0 3px 4px rgba(0, 0, 0, 0.7);\r\n background-color: rgba(0, 0, 0, 0.1);\r\n height: calc(100% - 240px - 0.7rem);\r\n overflow: scroll;\r\n }\r\n\r\n label {\r\n font-family: 'NotoColorEmoji';\r\n font-size: 3rem;\r\n position: absolute;\r\n top: 2px;\r\n right: 3px;\r\n z-index: 5;\r\n cursor: pointer;\r\n }\r\n\r\n input[type=checkbox] {\r\n position: absolute;\r\n top: -100px;\r\n }\r\n\r\n aside {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n text-shadow: 1px 1px 1px black;\r\n width: 100%;\r\n height: 100%;\r\n transform: translateX(100%);\r\n transition: 0.6s all;\r\n background-color: #999;\r\n background-image: linear-gradient(to top right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));\r\n }\r\n\r\n input[type=checkbox]:checked~aside {\r\n transform: translateX(0);\r\n }\r\n <\/style>\r\n<\/head>\r\n\r\n<body>\r\n <div class=\"row\">\r\n <h2>If you were given another chance to do a similar math problem, what would you need to do to do well?<\/h2>\r\n <p>Describe your strategy. You may type in the space below or use your device to record and upload a voice\r\n recording.<\/p><br><br>\r\n <form action=\"http:\/\/www.myedme.com\/login\/wp-admin\/admin-post.php\" method=\"post\">\r\n <input type=\"text\" id=\"stem\" name=\"stem\"\r\n value=\"Describe your strategy. You may type in the space below or use your device to record and upload a voice recording.\"\r\n style=\"display: none\">\r\n <input type=\"text\" name=\"score1\" id=\"score1\" value=\"88\" style=\"display: none\">\r\n <input type=\"text\" name=\"questionNum\" id=\"questionNum\" value=\"6\" style=\"display: none\">\r\n <input type=\"text\" name=\"chapterName\" id=\"chapterName\" value=\"Setting up The Road Runner Race\"\r\n style=\"display: none\">\r\n <input type=\"text\" id=\"queId\" name=\"queId\" value=\"SRL05p\" style=\"display: none\">\r\n <input type=\"text\" name=\"contextGrp1\" id=\"contextGrp1\" value=\"4OA3\" style=\"display: none\">\r\n <input type=\"text\" id=\"contextGrp2\" name=\"contextGrp2\" value=\"undefined\" style=\"display: none\">\r\n <input type=\"text\" id=\"keys1\" name=\"keys1\" value=\" \" style=\"display: none\">\r\n <input type=\"text\" name=\"keys2\" id=\"keys2\" value=\"\" style=\"display: none\">\r\n <input type=\"text\" id=\"answerId\" name=\"answerId\" value=\"\" style=\"display: none\">\r\n <input type=\"text\" id=\"queFormat\" value=\"3\" name=\"queFormat\" style=\"display: none\">\r\n <input type=\"hidden\" name=\"action\" value=\"edme_score_function\">\r\n <input type=\"text\" id=\"nextAddress\" name=\"nextAddress\" value=\"http:\/\/www.myedme.com\/login\/SRL05_Feedback\"\r\n style=\"display: none\">\r\n <input type=\"text\" id=\"stuAns3\" name=\"stuAns3\" value=\"\" size=\"145\">\r\n <input type=\"text\" id=\"stuAns2\" name=\"stuAns2\" value=\"99\" style=\"display: none\">\r\n <input type=\"text\" name=\"score2\" id=\"score2\" value=\"99\" style=\"display: none\">\r\n <tr>\r\n <td><br \/><\/td>\r\n <\/tr>\r\n <input type=\"text\" id=\"publicKey1\" name=\"publicKey1\"\r\n value=\"Your answer is not on our list. But, we are still determining all possible correct answers.\"\r\n style=\"display: none\">\r\n <input type=\"text\" id=\"publicKey2\" name=\"publicKey2\"\r\n value=\"Your evidence is not on our list. But, we are still determining all possible correct answers.\"\r\n style=\"display: none\">\r\n <input type=\"submit\" id=\"Next-Question\" value=\"Next Question\">\r\n <\/form>\r\n\r\n <p><\/p>\r\n \r\n <section class=\"main-controls\">\r\n <canvas class=\"visualizer\" height=\"60px\"><\/canvas>\r\n <div id=\"buttons\">\r\n <button class=\"record\">Record<\/button>\r\n <button class=\"stop\">Stop<\/button>\r\n <\/div>\r\n <\/section>\r\n <p id=\"successText\" style=\"display: hidden;\">Thanks! You can play the clip or move to the next question below.\r\n <\/p>\r\n <section class=\"sound-clips\">\r\n\r\n\r\n <\/section>\r\n\r\n \r\n\r\n <label for=\"toggle\">\u2754<\/label>\r\n <input type=\"checkbox\" id=\"toggle\">\r\n <aside>\r\n <h2>Thank you!<\/h2>\r\n <\/aside>\r\n\r\n\r\n <\/div>\r\n <input type=\"button\" name=\"NextPage\" id=\"NextPage\" style=\"float : right; font-size : 20px;\"\r\n onclick=\"location.href='https:\/\/myedme.com\/login\/SRL05_Feedback'\" value=\" Next Page \">\r\n<\/body>\r\n\r\n<\/html>\r\n<script>\r\n (function () {\r\n console.log(\"trace 1\");\r\n var audioCtx = null;\r\n var canvas = null;\r\n var recond = null;\r\n var stop = null;\r\n var soundClips = null;\r\n var canvasCtx = null;\r\n\r\n function startup() {\r\n console.log(\"trace 2\");\r\n successText = document.querySelector('.successText');\r\n record = document.querySelector('.record');\r\n stop = document.querySelector('.stop');\r\n soundClips = document.querySelector('.sound-clips');\r\n canvas = document.querySelector('.visualizer');\r\n canvasCtx = canvas.getContext(\"2d\");\r\n const mainSection = document.querySelector('.main-controls');\r\n let audioCtx;\r\n console.log(\"trace 3\");\r\n record.style.backgroundColor = \"green\";\r\n if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {\r\n console.log('getUserMedia supported.');\r\n navigator.mediaDevices.getUserMedia(\r\n \/\/ constraints - only audio needed for this app\r\n {\r\n audio: true\r\n })\r\n\r\n \/\/ Success callback\r\n .then(function (stream) {\r\n var options = {\r\n mimeType: 'audio\/webm; codecs=opus'\r\n }\r\n const mediaRecorder = new MediaRecorder(stream, options);\r\n visualizeAudio(stream);\r\n\r\n m = mediaRecorder;\r\n console.log(\"Media Type\" + m.mimeType);\r\n record.onclick = function () {\r\n mediaRecorder.start();\r\n console.log(mediaRecorder.state);\r\n console.log(\"recorder started\");\r\n record.style.background = \"grey\";\r\n record.style.color = \"black\";\r\n stop.style.backgroundColor = \"green\";\r\n const interval = setInterval(function () {\r\n \/\/ method to be executed;\r\n }, 45000);\r\n\r\n clearInterval(interval); \/\/ thanks @Luca D'Amico\r\n }\r\n\r\n let chunks = [];\r\n\r\n mediaRecorder.ondataavailable = function (e) {\r\n chunks.push(e.data);\r\n }\r\n\r\n stop.onclick = function () {\r\n stop.style.backgroundColor = \"gray\";\r\n mediaRecorder.stop();\r\n console.log(mediaRecorder.state);\r\n console.log(\"recorder stopped\");\r\n record.style.background = \"\";\r\n record.style.color = \"\";\r\n\r\n }\r\n\r\n mediaRecorder.onstop = function (e) {\r\n console.log(\"recorder stopped in onstopped function\");\r\n record.style.backgroundColor = \"gray\";\r\n\r\n \/\/const clipName = prompt('Enter a name for your sound clip?', 'My unnamed clip');\r\n const clipName = \"SRL05P_AdaptiveInference_MWP1\";\r\n const clipContainer = document.createElement('article');\r\n const clipLabel = document.createElement('p');\r\n const audio = document.createElement('audio');\r\n \/\/ const audio2 = document.createElement('audio'); \/\/delete\r\n const deleteButton = document.createElement('button');\r\n\r\n clipContainer.classList.add('clip');\r\n audio.setAttribute('controls', '');\r\n if (deleteButton) {\r\n deleteButton.innerHTML = \"Delete\";\r\n\r\n deleteButton.onclick = function (e) {\r\n let evtTgt = e.target;\r\n evtTgt.parentNode.parentNode.removeChild(evtTgt.parentNode);\r\n }\r\n }\r\n clipLabel.innerHTML = clipName;\r\n\r\n clipContainer.appendChild(audio);\r\n clipContainer.appendChild(clipLabel);\r\n clipContainer.appendChild(deleteButton);\r\n soundClips.appendChild(clipContainer);\r\n\r\n const blob = new Blob(chunks, {\r\n 'type': 'audio\/webm; codecs=opus'\r\n });\r\n chunks = [];\r\n const audioURL = window.URL.createObjectURL(blob);\r\n \/\/let audioFile = await fetch(audioURL).then(r => r.blob()).then(blobFile => new File([blobFile], \"SRL05_goal\", { type: \"audio\/ogg\" })\r\n console.log(audioURL);\r\n console.log(blob);\r\n var reader = new window.FileReader();\r\n var base64 = \"\";\r\n reader.readAsDataURL(blob);\r\n reader.onloadend = function () {\r\n base64 = reader.result;\r\n \/\/base64 = base64.split(',')[1];\r\n console.log(base64);\r\n let audioData = new FormData();\r\n audioData = {\r\n 'publicKey2': 'saving link for stuAns 2',\r\n 'publicKey1': 'saving link for stuAns 1',\r\n 'stuAns1': 'audioLink',\r\n 'stuAns2': '88',\r\n 'stuAns3': 'audioLink',\r\n 'stem': 'Link for SRL05p Adaptive Inference MWP#3 audio',\r\n 'keys1': '5',\r\n 'keys2': '88',\r\n 'answerId': 'audio',\r\n 'queId': 'SRL05p',\r\n 'contextGrp1': '4OA3',\r\n 'contextGrp2': 'MP',\r\n 'score1': '0',\r\n 'score2': '88',\r\n 'questionNum': 'SRL05p',\r\n 'chapterName': 'SRL05',\r\n 'queFormat': '7',\r\n 'nextAddress': 'https:\/\/myedme.com\/login\/SRL05_Feedback',\r\n 'action': 'edme_audio_function',\r\n 'type': 'POST',\r\n 'file': base64\r\n }\r\n console.log(\"Saving audio 2. audioData is\" + audioData);\r\n document.getElementById(\"NextPage\").style.backgroundColor = \"green\";\r\n document.getElementById(\"successText\").style.backgroundColor = \"green\";\r\n document.getElementById(\"successText\").style.color = \"white\";\r\n document.getElementById(\"NextPage\").style.color = \"white\";\r\n jQuery.post('https:\/\/myedme.com\/login\/wp-admin\/admin-ajax.php', audioData, function (response) {\r\n \/\/\t\t alert('Got this from the server: ' + response);\r\n console.log(\"Saving audio 4.\")\r\n console.log('Got this from the server: ' + response);\r\n });\r\n console.log(\"Saving audio 3.\")\r\n console.log(\"base64 is \" + base64);\r\n }\r\n \/\/audio2.duration\r\n \/\/audio2.currentTime = \r\n audio.src = audioURL;\r\n console.log(\"base64 is \" + base64);\r\n \/\/let encodedAudioString = blob.base64EncodedString()\r\n console.log(\"Saving audio.\")\r\n console.log(blob.size);\r\n console.log(blob.type);\r\n\r\n\r\n }\r\n\r\n\r\n })\r\n \/\/ Error callback\r\n .catch(function (err) {\r\n console.log('The following getUserMedia error occurred: ' + err);\r\n })\r\n\r\n } else {\r\n console.log('getUserMedia not supported on your browser!');\r\n }\r\n }\r\n\r\n function visualizeAudio(stream) {\r\n if (!audioCtx) {\r\n audioCtx = new AudioContext();\r\n }\r\n\r\n const source = audioCtx.createMediaStreamSource(stream);\r\n\r\n const analyser = audioCtx.createAnalyser();\r\n analyser.fftSize = 2048;\r\n const bufferLength = analyser.frequencyBinCount;\r\n const dataArray = new Uint8Array(bufferLength);\r\n\r\n source.connect(analyser);\r\n \/\/analyser.connect(audioCtx.destination);\r\n\r\n draw()\r\n\r\n function draw() {\r\n const WIDTH = canvas.width\r\n const HEIGHT = canvas.height;\r\n\r\n requestAnimationFrame(draw);\r\n\r\n analyser.getByteTimeDomainData(dataArray);\r\n\r\n canvasCtx.fillStyle = 'rgb(200, 200, 200)';\r\n canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);\r\n\r\n canvasCtx.lineWidth = 2;\r\n canvasCtx.strokeStyle = 'rgb(0, 0, 0)';\r\n\r\n canvasCtx.beginPath();\r\n\r\n let sliceWidth = WIDTH * 1.0 \/ bufferLength;\r\n let x = 0;\r\n\r\n\r\n for (let i = 0; i < bufferLength; i++) {\r\n\r\n let v = dataArray[i] \/ 128.0;\r\n let y = v * HEIGHT \/ 2;\r\n\r\n if (i === 0) {\r\n canvasCtx.moveTo(x, y);\r\n } else {\r\n canvasCtx.lineTo(x, y);\r\n }\r\n\r\n x += sliceWidth;\r\n }\r\n\r\n canvasCtx.lineTo(canvas.width, canvas.height \/ 2);\r\n canvasCtx.stroke();\r\n }\r\n\r\n }\r\n\r\n \/\/ Set up our event listener to run the startup process\r\n \/\/ once loading is complete.\r\n console.log(\"trace 4\");\r\n window.addEventListener('load', startup, false);\r\n console.log(\"trace 5\");\r\n })();\r\n<\/script>\r\n\r\n<div>\r\n\r\n<\/div>\r\n","protected":false},"excerpt":{"rendered":"<p>If you were given another chance to do a similar math problem, what would you need to do to do well?<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"opened","sticky":false,"template":"","format":"standard","meta":{"nf_dc_page":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[43,44],"tags":[],"class_list":["post-850","post","type-post","status-publish","format-standard","hentry","category-allpages","category-menu082617"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/myedme.com\/login\/wp-json\/wp\/v2\/posts\/850","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/myedme.com\/login\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/myedme.com\/login\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/myedme.com\/login\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/myedme.com\/login\/wp-json\/wp\/v2\/comments?post=850"}],"version-history":[{"count":0,"href":"https:\/\/myedme.com\/login\/wp-json\/wp\/v2\/posts\/850\/revisions"}],"wp:attachment":[{"href":"https:\/\/myedme.com\/login\/wp-json\/wp\/v2\/media?parent=850"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/myedme.com\/login\/wp-json\/wp\/v2\/categories?post=850"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/myedme.com\/login\/wp-json\/wp\/v2\/tags?post=850"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":850,"date":"2017-09-22T20:14:23","date_gmt":"2017-09-22T20:14:23","guid":{"rendered":""},"modified":"2017-09-22T20:14:23","modified_gmt":"2017-09-22T20:14:23","slug":"SRL05p","status":"publish","type":"post","link":"https:\/\/myedme.com\/login\/SRL05p\/","title":{"rendered":"Question #14"},"content":{"rendered":"\r\n\r\n\r\n\r\n\r\n Sample Video Item Type<\/title>\r\n <meta charset='utf-8'>\r\n <style type=\"text\/css\">\r\n header {\r\n height: 70px;\r\n }\r\n\r\n .main-controls {\r\n padding-bottom: 0.7rem;\r\n height: 170px;\r\n }\r\n\r\n .sound-clips {\r\n box-shadow: inset 0 3px 4px rgba(0, 0, 0, 0.7);\r\n background-color: rgba(0, 0, 0, 0.1);\r\n height: calc(100% - 240px - 0.7rem);\r\n overflow: scroll;\r\n }\r\n\r\n label {\r\n font-family: 'NotoColorEmoji';\r\n font-size: 3rem;\r\n position: absolute;\r\n top: 2px;\r\n right: 3px;\r\n z-index: 5;\r\n cursor: pointer;\r\n }\r\n\r\n input[type=checkbox] {\r\n position: absolute;\r\n top: -100px;\r\n }\r\n\r\n aside {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n text-shadow: 1px 1px 1px black;\r\n width: 100%;\r\n height: 100%;\r\n transform: translateX(100%);\r\n transition: 0.6s all;\r\n background-color: #999;\r\n background-image: linear-gradient(to top right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));\r\n }\r\n\r\n input[type=checkbox]:checked~aside {\r\n transform: translateX(0);\r\n }\r\n <\/style>\r\n<\/head>\r\n\r\n<body>\r\n <div class=\"row\">\r\n <h2>If you were given another chance to do a similar math problem, what would you need to do to do well?<\/h2>\r\n <p>Describe your strategy. You may type in the space below or use your device to record and upload a voice\r\n recording.<\/p><br><br>\r\n <form action=\"http:\/\/www.myedme.com\/login\/wp-admin\/admin-post.php\" method=\"post\">\r\n <input type=\"text\" id=\"stem\" name=\"stem\"\r\n value=\"Describe your strategy. You may type in the space below or use your device to record and upload a voice recording.\"\r\n style=\"display: none\">\r\n <input type=\"text\" name=\"score1\" id=\"score1\" value=\"88\" style=\"display: none\">\r\n <input type=\"text\" name=\"questionNum\" id=\"questionNum\" value=\"6\" style=\"display: none\">\r\n <input type=\"text\" name=\"chapterName\" id=\"chapterName\" value=\"Setting up The Road Runner Race\"\r\n style=\"display: none\">\r\n <input type=\"text\" id=\"queId\" name=\"queId\" value=\"SRL05p\" style=\"display: none\">\r\n <input type=\"text\" name=\"contextGrp1\" id=\"contextGrp1\" value=\"4OA3\" style=\"display: none\">\r\n <input type=\"text\" id=\"contextGrp2\" name=\"contextGrp2\" value=\"undefined\" style=\"display: none\">\r\n <input type=\"text\" id=\"keys1\" name=\"keys1\" value=\" \" style=\"display: none\">\r\n <input type=\"text\" name=\"keys2\" id=\"keys2\" value=\"\" style=\"display: none\">\r\n <input type=\"text\" id=\"answerId\" name=\"answerId\" value=\"\" style=\"display: none\">\r\n <input type=\"text\" id=\"queFormat\" value=\"3\" name=\"queFormat\" style=\"display: none\">\r\n <input type=\"hidden\" name=\"action\" value=\"edme_score_function\">\r\n <input type=\"text\" id=\"nextAddress\" name=\"nextAddress\" value=\"http:\/\/www.myedme.com\/login\/SRL05_Feedback\"\r\n style=\"display: none\">\r\n <input type=\"text\" id=\"stuAns3\" name=\"stuAns3\" value=\"\" size=\"145\">\r\n <input type=\"text\" id=\"stuAns2\" name=\"stuAns2\" value=\"99\" style=\"display: none\">\r\n <input type=\"text\" name=\"score2\" id=\"score2\" value=\"99\" style=\"display: none\">\r\n <tr>\r\n <td><br \/><\/td>\r\n <\/tr>\r\n <input type=\"text\" id=\"publicKey1\" name=\"publicKey1\"\r\n value=\"Your answer is not on our list. But, we are still determining all possible correct answers.\"\r\n style=\"display: none\">\r\n <input type=\"text\" id=\"publicKey2\" name=\"publicKey2\"\r\n value=\"Your evidence is not on our list. But, we are still determining all possible correct answers.\"\r\n style=\"display: none\">\r\n <input type=\"submit\" id=\"Next-Question\" value=\"Next Question\">\r\n <\/form>\r\n\r\n <p><\/p>\r\n \r\n <section class=\"main-controls\">\r\n <canvas class=\"visualizer\" height=\"60px\"><\/canvas>\r\n <div id=\"buttons\">\r\n <button class=\"record\">Record<\/button>\r\n <button class=\"stop\">Stop<\/button>\r\n <\/div>\r\n <\/section>\r\n <p id=\"successText\" style=\"display: hidden;\">Thanks! You can play the clip or move to the next question below.\r\n <\/p>\r\n <section class=\"sound-clips\">\r\n\r\n\r\n <\/section>\r\n\r\n \r\n\r\n <label for=\"toggle\">\u2754<\/label>\r\n <input type=\"checkbox\" id=\"toggle\">\r\n <aside>\r\n <h2>Thank you!<\/h2>\r\n <\/aside>\r\n\r\n\r\n <\/div>\r\n <input type=\"button\" name=\"NextPage\" id=\"NextPage\" style=\"float : right; font-size : 20px;\"\r\n onclick=\"location.href='https:\/\/myedme.com\/login\/SRL05_Feedback'\" value=\" Next Page \">\r\n<\/body>\r\n\r\n<\/html>\r\n<script>\r\n (function () {\r\n console.log(\"trace 1\");\r\n var audioCtx = null;\r\n var canvas = null;\r\n var recond = null;\r\n var stop = null;\r\n var soundClips = null;\r\n var canvasCtx = null;\r\n\r\n function startup() {\r\n console.log(\"trace 2\");\r\n successText = document.querySelector('.successText');\r\n record = document.querySelector('.record');\r\n stop = document.querySelector('.stop');\r\n soundClips = document.querySelector('.sound-clips');\r\n canvas = document.querySelector('.visualizer');\r\n canvasCtx = canvas.getContext(\"2d\");\r\n const mainSection = document.querySelector('.main-controls');\r\n let audioCtx;\r\n console.log(\"trace 3\");\r\n record.style.backgroundColor = \"green\";\r\n if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {\r\n console.log('getUserMedia supported.');\r\n navigator.mediaDevices.getUserMedia(\r\n \/\/ constraints - only audio needed for this app\r\n {\r\n audio: true\r\n })\r\n\r\n \/\/ Success callback\r\n .then(function (stream) {\r\n var options = {\r\n mimeType: 'audio\/webm; codecs=opus'\r\n }\r\n const mediaRecorder = new MediaRecorder(stream, options);\r\n visualizeAudio(stream);\r\n\r\n m = mediaRecorder;\r\n console.log(\"Media Type\" + m.mimeType);\r\n record.onclick = function () {\r\n mediaRecorder.start();\r\n console.log(mediaRecorder.state);\r\n console.log(\"recorder started\");\r\n record.style.background = \"grey\";\r\n record.style.color = \"black\";\r\n stop.style.backgroundColor = \"green\";\r\n const interval = setInterval(function () {\r\n \/\/ method to be executed;\r\n }, 45000);\r\n\r\n clearInterval(interval); \/\/ thanks @Luca D'Amico\r\n }\r\n\r\n let chunks = [];\r\n\r\n mediaRecorder.ondataavailable = function (e) {\r\n chunks.push(e.data);\r\n }\r\n\r\n stop.onclick = function () {\r\n stop.style.backgroundColor = \"gray\";\r\n mediaRecorder.stop();\r\n console.log(mediaRecorder.state);\r\n console.log(\"recorder stopped\");\r\n record.style.background = \"\";\r\n record.style.color = \"\";\r\n\r\n }\r\n\r\n mediaRecorder.onstop = function (e) {\r\n console.log(\"recorder stopped in onstopped function\");\r\n record.style.backgroundColor = \"gray\";\r\n\r\n \/\/const clipName = prompt('Enter a name for your sound clip?', 'My unnamed clip');\r\n const clipName = \"SRL05P_AdaptiveInference_MWP1\";\r\n const clipContainer = document.createElement('article');\r\n const clipLabel = document.createElement('p');\r\n const audio = document.createElement('audio');\r\n \/\/ const audio2 = document.createElement('audio'); \/\/delete\r\n const deleteButton = document.createElement('button');\r\n\r\n clipContainer.classList.add('clip');\r\n audio.setAttribute('controls', '');\r\n if (deleteButton) {\r\n deleteButton.innerHTML = \"Delete\";\r\n\r\n deleteButton.onclick = function (e) {\r\n let evtTgt = e.target;\r\n evtTgt.parentNode.parentNode.removeChild(evtTgt.parentNode);\r\n }\r\n }\r\n clipLabel.innerHTML = clipName;\r\n\r\n clipContainer.appendChild(audio);\r\n clipContainer.appendChild(clipLabel);\r\n clipContainer.appendChild(deleteButton);\r\n soundClips.appendChild(clipContainer);\r\n\r\n const blob = new Blob(chunks, {\r\n 'type': 'audio\/webm; codecs=opus'\r\n });\r\n chunks = [];\r\n const audioURL = window.URL.createObjectURL(blob);\r\n \/\/let audioFile = await fetch(audioURL).then(r => r.blob()).then(blobFile => new File([blobFile], \"SRL05_goal\", { type: \"audio\/ogg\" })\r\n console.log(audioURL);\r\n console.log(blob);\r\n var reader = new window.FileReader();\r\n var base64 = \"\";\r\n reader.readAsDataURL(blob);\r\n reader.onloadend = function () {\r\n base64 = reader.result;\r\n \/\/base64 = base64.split(',')[1];\r\n console.log(base64);\r\n let audioData = new FormData();\r\n audioData = {\r\n 'publicKey2': 'saving link for stuAns 2',\r\n 'publicKey1': 'saving link for stuAns 1',\r\n 'stuAns1': 'audioLink',\r\n 'stuAns2': '88',\r\n 'stuAns3': 'audioLink',\r\n 'stem': 'Link for SRL05p Adaptive Inference MWP#3 audio',\r\n 'keys1': '5',\r\n 'keys2': '88',\r\n 'answerId': 'audio',\r\n 'queId': 'SRL05p',\r\n 'contextGrp1': '4OA3',\r\n 'contextGrp2': 'MP',\r\n 'score1': '0',\r\n 'score2': '88',\r\n 'questionNum': 'SRL05p',\r\n 'chapterName': 'SRL05',\r\n 'queFormat': '7',\r\n 'nextAddress': 'https:\/\/myedme.com\/login\/SRL05_Feedback',\r\n 'action': 'edme_audio_function',\r\n 'type': 'POST',\r\n 'file': base64\r\n }\r\n console.log(\"Saving audio 2. audioData is\" + audioData);\r\n document.getElementById(\"NextPage\").style.backgroundColor = \"green\";\r\n document.getElementById(\"successText\").style.backgroundColor = \"green\";\r\n document.getElementById(\"successText\").style.color = \"white\";\r\n document.getElementById(\"NextPage\").style.color = \"white\";\r\n jQuery.post('https:\/\/myedme.com\/login\/wp-admin\/admin-ajax.php', audioData, function (response) {\r\n \/\/\t\t alert('Got this from the server: ' + response);\r\n console.log(\"Saving audio 4.\")\r\n console.log('Got this from the server: ' + response);\r\n });\r\n console.log(\"Saving audio 3.\")\r\n console.log(\"base64 is \" + base64);\r\n }\r\n \/\/audio2.duration\r\n \/\/audio2.currentTime = \r\n audio.src = audioURL;\r\n console.log(\"base64 is \" + base64);\r\n \/\/let encodedAudioString = blob.base64EncodedString()\r\n console.log(\"Saving audio.\")\r\n console.log(blob.size);\r\n console.log(blob.type);\r\n\r\n\r\n }\r\n\r\n\r\n })\r\n \/\/ Error callback\r\n .catch(function (err) {\r\n console.log('The following getUserMedia error occurred: ' + err);\r\n })\r\n\r\n } else {\r\n console.log('getUserMedia not supported on your browser!');\r\n }\r\n }\r\n\r\n function visualizeAudio(stream) {\r\n if (!audioCtx) {\r\n audioCtx = new AudioContext();\r\n }\r\n\r\n const source = audioCtx.createMediaStreamSource(stream);\r\n\r\n const analyser = audioCtx.createAnalyser();\r\n analyser.fftSize = 2048;\r\n const bufferLength = analyser.frequencyBinCount;\r\n const dataArray = new Uint8Array(bufferLength);\r\n\r\n source.connect(analyser);\r\n \/\/analyser.connect(audioCtx.destination);\r\n\r\n draw()\r\n\r\n function draw() {\r\n const WIDTH = canvas.width\r\n const HEIGHT = canvas.height;\r\n\r\n requestAnimationFrame(draw);\r\n\r\n analyser.getByteTimeDomainData(dataArray);\r\n\r\n canvasCtx.fillStyle = 'rgb(200, 200, 200)';\r\n canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);\r\n\r\n canvasCtx.lineWidth = 2;\r\n canvasCtx.strokeStyle = 'rgb(0, 0, 0)';\r\n\r\n canvasCtx.beginPath();\r\n\r\n let sliceWidth = WIDTH * 1.0 \/ bufferLength;\r\n let x = 0;\r\n\r\n\r\n for (let i = 0; i < bufferLength; i++) {\r\n\r\n let v = dataArray[i] \/ 128.0;\r\n let y = v * HEIGHT \/ 2;\r\n\r\n if (i === 0) {\r\n canvasCtx.moveTo(x, y);\r\n } else {\r\n canvasCtx.lineTo(x, y);\r\n }\r\n\r\n x += sliceWidth;\r\n }\r\n\r\n canvasCtx.lineTo(canvas.width, canvas.height \/ 2);\r\n canvasCtx.stroke();\r\n }\r\n\r\n }\r\n\r\n \/\/ Set up our event listener to run the startup process\r\n \/\/ once loading is complete.\r\n console.log(\"trace 4\");\r\n window.addEventListener('load', startup, false);\r\n console.log(\"trace 5\");\r\n })();\r\n<\/script>\r\n\r\n<div>\r\n\r\n<\/div>\r\n","protected":false},"excerpt":{"rendered":"<p>If you were given another chance to do a similar math problem, what would you need to do to do well?<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"opened","sticky":false,"template":"","format":"standard","meta":{"nf_dc_page":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[43,44],"tags":[],"class_list":["post-850","post","type-post","status-publish","format-standard","hentry","category-allpages","category-menu082617"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/myedme.com\/login\/wp-json\/wp\/v2\/posts\/850","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/myedme.com\/login\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/myedme.com\/login\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/myedme.com\/login\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/myedme.com\/login\/wp-json\/wp\/v2\/comments?post=850"}],"version-history":[{"count":0,"href":"https:\/\/myedme.com\/login\/wp-json\/wp\/v2\/posts\/850\/revisions"}],"wp:attachment":[{"href":"https:\/\/myedme.com\/login\/wp-json\/wp\/v2\/media?parent=850"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/myedme.com\/login\/wp-json\/wp\/v2\/categories?post=850"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/myedme.com\/login\/wp-json\/wp\/v2\/tags?post=850"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}