Дозаливка
This commit is contained in:
@@ -0,0 +1,238 @@
|
||||
<!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>
|
||||
|
||||
Reference in New Issue
Block a user