239 lines
8.0 KiB
HTML
239 lines
8.0 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en-us">
|
||
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width">
|
||
<title>Web dictaphone</title>
|
||
<link href="styles/app.css" rel="stylesheet" type="text/css">
|
||
</head>
|
||
|
||
<style>
|
||
#chatInputWindow {
|
||
width: 96px;
|
||
margin-bottom: 10px;
|
||
}
|
||
.record {
|
||
width: 150px;
|
||
}
|
||
</style>
|
||
|
||
<body>
|
||
|
||
<div class="wrapper">
|
||
|
||
<header>
|
||
<h1>Голосовухи</h1>
|
||
</header>
|
||
|
||
<input id="chatInputWindow" type="text">
|
||
|
||
<section class="main-controls">
|
||
<div id="buttons">
|
||
<button class="record">Начать запись</button>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="sound-clips">
|
||
|
||
|
||
</section>
|
||
|
||
<!-- <audio id="test" controls style="width:100%;max-width:600px;">
|
||
</audio> -->
|
||
|
||
</div>
|
||
|
||
</aside>
|
||
<script>
|
||
|
||
|
||
const record = document.querySelector('.record');
|
||
const soundClips = document.querySelector('.sound-clips');
|
||
const canvas = document.querySelector('.visualizer');
|
||
const mainSection = document.querySelector('.main-controls');
|
||
const chatInputWindow = document.getElementById("chatInputWindow")
|
||
|
||
|
||
// const $testSource = document.getElementById("test")
|
||
// $testSource.innerHTML =
|
||
// `\n<source src=\"https://new-combats.com/audio/play.php?id=1\" type=\"audio/mp3\">\n`
|
||
|
||
|
||
// chatInputWindow.attributes.readonly = true
|
||
// chatInputWindow.textContent = "dsds"
|
||
// console.log(chatInputWindow.value)
|
||
|
||
let audioCtx;
|
||
let i = 0
|
||
|
||
//main block for doing the audio recording
|
||
|
||
if (navigator.mediaDevices.getUserMedia) {
|
||
|
||
const constraints = {
|
||
audio: true
|
||
};
|
||
let chunks = [];
|
||
|
||
let onSuccess = function (stream) {
|
||
const mediaRecorder = new MediaRecorder(stream);
|
||
|
||
visualize(stream);
|
||
|
||
|
||
let setIntervalSound
|
||
|
||
|
||
record.addEventListener("click", function (event) {
|
||
|
||
if (record.textContent === "Начать запись") {
|
||
|
||
mediaRecorder.start()
|
||
|
||
let timerSecMessage = 1
|
||
let timerMinMessage = 0
|
||
setIntervalSound = setInterval( () => {
|
||
|
||
if (timerMinMessage === 60) {
|
||
clearInterval(setIntervalSound)
|
||
mediaRecorder.stop();
|
||
|
||
chatInputWindow.value = ""
|
||
record.textContent = "Начать запись"
|
||
record.style.color = ""
|
||
// record.style.background = ""
|
||
return
|
||
}
|
||
|
||
if (timerMinMessage > 9) chatInputWindow.value = `00:${timerMinMessage},${timerSecMessage}`
|
||
else chatInputWindow.value = `00:0${timerMinMessage},${timerSecMessage}`
|
||
|
||
if (++timerSecMessage > 9) {
|
||
timerSecMessage = 0
|
||
++timerMinMessage
|
||
}
|
||
}, 100)
|
||
|
||
// console.log(stream)
|
||
record.textContent = "Завершить запись"
|
||
record.style.color = "red"
|
||
// record.style.background = "grey";
|
||
return
|
||
}
|
||
clearInterval(setIntervalSound)
|
||
mediaRecorder.stop();
|
||
|
||
chatInputWindow.value = ""
|
||
record.textContent = "Начать запись"
|
||
record.style.color = ""
|
||
// record.style.background = "";
|
||
return
|
||
})
|
||
|
||
mediaRecorder.onstop = function (e) {
|
||
|
||
// const clipContainer = document.createElement('article');
|
||
// const clipLabel = document.createElement('p');
|
||
// const audio = document.createElement('audio');
|
||
// const deleteButton = document.createElement('button');
|
||
|
||
// clipContainer.classList.add('clip');
|
||
// audio.setAttribute('controls', '');
|
||
// deleteButton.textContent = 'Delete';
|
||
// deleteButton.className = 'delete';
|
||
|
||
// clipLabel.textContent = `голосовое сообщение ${++i}`
|
||
|
||
// clipContainer.appendChild(audio);
|
||
// clipContainer.appendChild(clipLabel);
|
||
// clipContainer.appendChild(deleteButton);
|
||
// soundClips.appendChild(clipContainer);
|
||
|
||
// audio.controls = true;
|
||
|
||
// преобразование кусков в один BLOB и преобразование его в ArrayBuffer
|
||
|
||
const blob = new Blob(chunks, {
|
||
'type': 'audio/mp3; codecs=opus'
|
||
})
|
||
|
||
chunks.pop()
|
||
|
||
const fileReader = new FileReader()
|
||
fileReader.readAsArrayBuffer(blob)
|
||
|
||
|
||
fileReader.onload = async function (event) {
|
||
|
||
const arrayBuffer = fileReader.result
|
||
|
||
// console.log(arrayBuffer)
|
||
|
||
// Запрос
|
||
const response = await fetch("https://new-combats.com/testa/audio.php", {
|
||
method: "POST",
|
||
// body: JSON.stringify(objAjax)
|
||
body: arrayBuffer
|
||
})
|
||
|
||
// const result = await response.json()
|
||
const timeStampFile = await response.text()
|
||
// console.log(arrayResBuffer)
|
||
|
||
// const audioURL = window.URL.createObjectURL(arrayResBuffer);
|
||
// // console.log(audioURL)
|
||
// audio.src = audioURL;
|
||
// audio.src = "https://new-combats.com/audio/play.php?id=1"
|
||
soundClips.innerHTML += `<audio id="test" controls style="width:100%;max-width:600px;">
|
||
<source src="audio/audio_${timeStampFile}.mp3" type="audio/mp3">
|
||
</audio>`
|
||
// document.body.innerHTML += `<audio id="test" controls style="width:100%;max-width:600px;">
|
||
// <source src="audio/audio_${timeStampFile}.mp3" type="audio/mp3">
|
||
// </audio>`
|
||
|
||
// document.getElementById("test").innerHTML = `
|
||
// `
|
||
|
||
// deleteButton.onclick = function (e) {
|
||
// let evtTgt = e.target;
|
||
// evtTgt.parentNode.parentNode.removeChild(evtTgt.parentNode);
|
||
// }
|
||
}
|
||
}
|
||
|
||
mediaRecorder.ondataavailable = function (e) {
|
||
chunks.push(e.data);
|
||
}
|
||
}
|
||
|
||
let onError = function (err) {
|
||
console.log('The following error occured: ' + err);
|
||
}
|
||
|
||
navigator.mediaDevices.getUserMedia(constraints).then(onSuccess, onError);
|
||
|
||
} else {
|
||
console.log('getUserMedia not supported on your browser!');
|
||
}
|
||
|
||
function visualize(stream) {
|
||
if (!audioCtx) {
|
||
audioCtx = new AudioContext();
|
||
}
|
||
|
||
const source = audioCtx.createMediaStreamSource(stream);
|
||
|
||
const analyser = audioCtx.createAnalyser();
|
||
analyser.fftSize = 2048;
|
||
const bufferLength = analyser.frequencyBinCount;
|
||
const dataArray = new Uint8Array(bufferLength);
|
||
source.connect(analyser);
|
||
// analyser.connect(audioCtx.destination);
|
||
}
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|
||
|