{"id":174,"date":"2024-04-03T18:11:38","date_gmt":"2024-04-03T18:11:38","guid":{"rendered":"https:\/\/itsiller-software.com\/?page_id=174"},"modified":"2024-05-31T21:13:19","modified_gmt":"2024-05-31T20:13:19","slug":"4-2","status":"publish","type":"page","link":"https:\/\/itsiller-software.com\/index.php\/4-2\/","title":{"rendered":"Recording"},"content":{"rendered":"<div>  <\/style>\n<div class=\"recording-buttons uk-margin uk-button-small\">\n    <button id=\"recordButton\" \n class=\"uk-button uk-button-danger\"> Recording<\/button><br \/>\n    <button id=\"saveButton\" class=\"uk-button uk-button-primary\">Stop<\/button>\n  <\/div>\n<div id=\"recordingsList\" class=\"uk-margin\"><\/div>\n<p>  <script>\n    \/\/ \u041f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f\n    const recordButton = document.getElementById('recordButton');\n    const saveButton = document.getElementById('saveButton');\n    const recordingsList = document.getElementById('recordingsList');<\/p>\n<p>    \/\/ \u041f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0437\u0430\u043f\u0438\u0441\u044c\u044e\n    let mediaRecorder;\n    let recordedChunks = [];\n    let recordings = [];<\/p>\n<p>    \/\/ \u041d\u0430\u0436\u0430\u0442\u0438\u0435 \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443 \"\u0417\u0430\u043f\u0438\u0441\u0430\u0442\u044c\"\n    recordButton.addEventListener('click', async () => {\n      \/\/ \u041d\u0430\u0447\u0430\u0442\u044c \u0437\u0430\u043f\u0438\u0441\u044c\n      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });\n      mediaRecorder = new MediaRecorder(stream);<\/p>\n<p>      mediaRecorder.ondataavailable = event => {\n        recordedChunks.push(event.data);\n      };<\/p>\n<p>      mediaRecorder.start();\n    });<\/p>\n<p>    \/\/ \u041d\u0430\u0436\u0430\u0442\u0438\u0435 \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443 \"\u0421\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u044c\"\n    saveButton.addEventListener('click', () => {\n      if (mediaRecorder && mediaRecorder.state === 'recording') {\n        mediaRecorder.stop();\n        mediaRecorder.onstop = () => {\n          const blob = new Blob(recordedChunks, { type: 'audio\/mp3' });\n          recordings.push(blob);\n          renderRecordings();\n          recordedChunks = [];<\/p>\n<p>          \/\/ \u041e\u0441\u0432\u043e\u0431\u043e\u0436\u0434\u0430\u0435\u043c \u0440\u0435\u0441\u0443\u0440\u0441\u044b \u043c\u0438\u043a\u0440\u043e\u0444\u043e\u043d\u0430 \u043f\u043e\u0441\u043b\u0435 \u043e\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u0437\u0430\u043f\u0438\u0441\u0438\n          mediaRecorder.stream.getTracks().forEach(track => track.stop());\n        };\n      }\n    });<\/p>\n<p>    \/\/ \u0424\u0443\u043d\u043a\u0446\u0438\u044f \u0434\u043b\u044f \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u0437\u0430\u043f\u0438\u0441\u0435\u0439\n    function renderRecordings() {\n      recordingsList.innerHTML = '';\n      recordings.forEach((blob, index) => {\n        const audioURL = URL.createObjectURL(blob);\n        const audioElement = document.createElement('audio');\n        audioElement.controls = true;\n        audioElement.src = audioURL;\n        audioElement.className = 'uk-margin-small-right';<\/p>\n<p>        const deleteButton = document.createElement('button');\n        deleteButton.textContent = 'Del';\n        deleteButton.className = 'uk-button uk-button-secondary uk-margin-small-left';\n        deleteButton.addEventListener('click', () => {\n          deleteRecording(index);\n        });<\/p>\n<p>        const recordingItem = document.createElement('div');\n        recordingItem.className = 'recording-item uk-flex uk-flex-middle'; \/\/ \u041f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0441\u0442\u0438\u043b\u0435\u0439 \u043a \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0443 \u0437\u0430\u043f\u0438\u0441\u0438\n        recordingItem.appendChild(audioElement);\n        recordingItem.appendChild(deleteButton);\n        recordingsList.appendChild(recordingItem);\n      });\n    }<\/p>\n<p>    \/\/ \u0424\u0443\u043d\u043a\u0446\u0438\u044f \u0434\u043b\u044f \u0443\u0434\u0430\u043b\u0435\u043d\u0438\u044f \u0437\u0430\u043f\u0438\u0441\u0438\n    function deleteRecording(index) {\n      recordings.splice(index, 1);\n      renderRecordings();\n    }\n  <\/script><\/div>\n<p><!--more--><br \/>\n<!-- {\"type\":\"layout\",\"children\":[{\"type\":\"section\",\"props\":{\"image_position\":\"center-center\",\"style\":\"default\",\"title_breakpoint\":\"xl\",\"title_position\":\"top-left\",\"title_rotation\":\"left\",\"vertical_align\":\"middle\",\"width\":\"default\"},\"children\":[{\"type\":\"row\",\"children\":[{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\"},\"children\":[{\"type\":\"text\",\"props\":{\"column_breakpoint\":\"m\",\"content\":\"  <\\\/style>\\n\\n  \n\n<div class=\\\"recording-buttons uk-margin uk-button-small\\\">\\n    <button id=\\\"recordButton\\\" \\n class=\\\"uk-button uk-button-danger\\\"> Recording<\\\/button>\\n    <button id=\\\"saveButton\\\" class=\\\"uk-button uk-button-primary\\\">Stop<\\\/button>\\n  <\\\/div>\\n  \n\n<div id=\\\"recordingsList\\\" class=\\\"uk-margin\\\"><\\\/div>\\n\\n  \\n  <script>\\n    \\\/\\\/ \\u041f\\u043e\\u043b\\u0443\\u0447\\u0435\\u043d\\u0438\\u0435 \\u044d\\u043b\\u0435\\u043c\\u0435\\u043d\\u0442\\u043e\\u0432 \\u0443\\u043f\\u0440\\u0430\\u0432\\u043b\\u0435\\u043d\\u0438\\u044f\\n    const recordButton = document.getElementById('recordButton');\\n    const saveButton = document.getElementById('saveButton');\\n    const recordingsList = document.getElementById('recordingsList');\\n\\n    \\\/\\\/ \\u041f\\u0435\\u0440\\u0435\\u043c\\u0435\\u043d\\u043d\\u044b\\u0435 \\u0434\\u043b\\u044f \\u0440\\u0430\\u0431\\u043e\\u0442\\u044b \\u0441 \\u0437\\u0430\\u043f\\u0438\\u0441\\u044c\\u044e\\n    let mediaRecorder;\\n    let recordedChunks = [];\\n    let recordings = [];\\n\\n    \\\/\\\/ \\u041d\\u0430\\u0436\\u0430\\u0442\\u0438\\u0435 \\u043d\\u0430 \\u043a\\u043d\\u043e\\u043f\\u043a\\u0443 \\\"\\u0417\\u0430\\u043f\\u0438\\u0441\\u0430\\u0442\\u044c\\\"\\n    recordButton.addEventListener('click', async () => {\\n      \\\/\\\/ \\u041d\\u0430\\u0447\\u0430\\u0442\\u044c \\u0437\\u0430\\u043f\\u0438\\u0441\\u044c\\n      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });\\n      mediaRecorder = new MediaRecorder(stream);\\n\\n      mediaRecorder.ondataavailable = event => {\\n        recordedChunks.push(event.data);\\n      };\\n\\n      mediaRecorder.start();\\n    });\\n\\n    \\\/\\\/ \\u041d\\u0430\\u0436\\u0430\\u0442\\u0438\\u0435 \\u043d\\u0430 \\u043a\\u043d\\u043e\\u043f\\u043a\\u0443 \\\"\\u0421\\u043e\\u0445\\u0440\\u0430\\u043d\\u0438\\u0442\\u044c\\\"\\n    saveButton.addEventListener('click', () => {\\n      if (mediaRecorder && mediaRecorder.state === 'recording') {\\n        mediaRecorder.stop();\\n        mediaRecorder.onstop = () => {\\n          const blob = new Blob(recordedChunks, { type: 'audio\\\/mp3' });\\n          recordings.push(blob);\\n          renderRecordings();\\n          recordedChunks = [];\\n\\n          \\\/\\\/ \\u041e\\u0441\\u0432\\u043e\\u0431\\u043e\\u0436\\u0434\\u0430\\u0435\\u043c \\u0440\\u0435\\u0441\\u0443\\u0440\\u0441\\u044b \\u043c\\u0438\\u043a\\u0440\\u043e\\u0444\\u043e\\u043d\\u0430 \\u043f\\u043e\\u0441\\u043b\\u0435 \\u043e\\u0441\\u0442\\u0430\\u043d\\u043e\\u0432\\u043a\\u0438 \\u0437\\u0430\\u043f\\u0438\\u0441\\u0438\\n          mediaRecorder.stream.getTracks().forEach(track => track.stop());\\n        };\\n      }\\n    });\\n\\n    \\\/\\\/ \\u0424\\u0443\\u043d\\u043a\\u0446\\u0438\\u044f \\u0434\\u043b\\u044f \\u0440\\u0435\\u043d\\u0434\\u0435\\u0440\\u0438\\u043d\\u0433\\u0430 \\u0437\\u0430\\u043f\\u0438\\u0441\\u0435\\u0439\\n    function renderRecordings() {\\n      recordingsList.innerHTML = '';\\n      recordings.forEach((blob, index) => {\\n        const audioURL = URL.createObjectURL(blob);\\n        const audioElement = document.createElement('audio');\\n        audioElement.controls = true;\\n        audioElement.src = audioURL;\\n        audioElement.className = 'uk-margin-small-right';\\n\\n        const deleteButton = document.createElement('button');\\n        deleteButton.textContent = 'Del';\\n        deleteButton.className = 'uk-button uk-button-secondary uk-margin-small-left';\\n        deleteButton.addEventListener('click', () => {\\n          deleteRecording(index);\\n        });\\n\\n        const recordingItem = document.createElement('div');\\n        recordingItem.className = 'recording-item uk-flex uk-flex-middle'; \\\/\\\/ \\u041f\\u0440\\u0438\\u043c\\u0435\\u043d\\u0435\\u043d\\u0438\\u0435 \\u0441\\u0442\\u0438\\u043b\\u0435\\u0439 \\u043a \\u043a\\u043e\\u043d\\u0442\\u0435\\u0439\\u043d\\u0435\\u0440\\u0443 \\u0437\\u0430\\u043f\\u0438\\u0441\\u0438\\n        recordingItem.appendChild(audioElement);\\n        recordingItem.appendChild(deleteButton);\\n        recordingsList.appendChild(recordingItem);\\n      });\\n    }\\n\\n    \\\/\\\/ \\u0424\\u0443\\u043d\\u043a\\u0446\\u0438\\u044f \\u0434\\u043b\\u044f \\u0443\\u0434\\u0430\\u043b\\u0435\\u043d\\u0438\\u044f \\u0437\\u0430\\u043f\\u0438\\u0441\\u0438\\n    function deleteRecording(index) {\\n      recordings.splice(index, 1);\\n      renderRecordings();\\n    }\\n  <\\\/script>\",\"margin\":\"default\"}}]}]}]},{\"type\":\"section\",\"props\":{\"image_position\":\"center-center\",\"style\":\"default\",\"title_breakpoint\":\"xl\",\"title_position\":\"top-left\",\"title_rotation\":\"left\",\"vertical_align\":\"middle\",\"width\":\"default\"},\"children\":[{\"type\":\"row\",\"children\":[{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\"},\"children\":[{\"type\":\"button\",\"props\":{\"grid_column_gap\":\"small\",\"grid_row_gap\":\"small\",\"margin\":\"default\",\"status\":\"disabled\"},\"children\":[{\"type\":\"button_item\",\"props\":{\"button_style\":\"danger\",\"content\":\"Recording\",\"icon\":\"forward\",\"icon_align\":\"left\",\"link\":\"https:\\\/\\\/online-voice-recorder.com\\\/\",\"link_target\":\"blank\"}}]}]}]}]}],\"version\":\"4.3.8\"} --><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Recording Stop<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-174","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/itsiller-software.com\/index.php\/wp-json\/wp\/v2\/pages\/174","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/itsiller-software.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/itsiller-software.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/itsiller-software.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/itsiller-software.com\/index.php\/wp-json\/wp\/v2\/comments?post=174"}],"version-history":[{"count":184,"href":"https:\/\/itsiller-software.com\/index.php\/wp-json\/wp\/v2\/pages\/174\/revisions"}],"predecessor-version":[{"id":2472,"href":"https:\/\/itsiller-software.com\/index.php\/wp-json\/wp\/v2\/pages\/174\/revisions\/2472"}],"wp:attachment":[{"href":"https:\/\/itsiller-software.com\/index.php\/wp-json\/wp\/v2\/media?parent=174"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}