View file voice/js/app.js

import('./settings.js').then(Fn => {
	Fn.buttonShow('block', '', '', '', 'block');
	document.querySelector('#voicePanel').addEventListener('click', e => {
		Fn.buttonShow('', '', '', 'block', '', 'block');
		navigator.mediaDevices.getUserMedia({
			video: true,
			audio: true
		}).then(stream => {
			Fn.buttonShow('', 'block', '', 'block', '', '');
			const mediaRecorder = new MediaRecorder(stream);
			import('./storage.js').then(Df => {
				Df.iconsDefaultSele(stream)
			});
			document.querySelector('#voiceStart').addEventListener('click', e => {
				context = new AudioContext();
				src = context.createMediaStreamSource(stream);
				analyser = context.createAnalyser();
				src = context.createMediaStreamSource(stream);
				src.connect(analyser);
				let data = e.target.attributes;
				window.currentUser = {
					contact: data.ank.nodeValue
				};
				try {
					mediaRecorder.start();
				} catch(e) {}
				displayAnalyserTime('true');
				recordStopTime();
				Fn.buttonShow('', '', 'block', 'block', '', '', '', 'block');
			});
			document.querySelector('#voiceEnd').addEventListener('click', e => {
				if(mediaRecorder.state === 'recording') stream.getTracks().forEach(track => track.stop());
			});
			let audioChunks = [];
			mediaRecorder.addEventListener("dataavailable", e => {
				displayAnalyserTime('false');
				audioChunks.push(e.data);
			});
			mediaRecorder.addEventListener("stop", e => {
				const audioBlob = new Blob(audioChunks, {
					type: 'audio/ogg'
				});
				let formData = new FormData();
				formData.append('data', [window.currentUser.contact,
					localStorage.getItem('voiceAudio') !== null ? 'audio' : 'video'
				]);
				formData.append('voice', audioBlob);
				recordSendBlob(formData);
				audioChunks = [];
			});
			recordStopTime = () => {
				setTimeout(() => {
					if(mediaRecorder.state !== 'inactive') stream.getTracks().forEach(track => track.stop());
				}, Fn.timeEnd)
			};
		}).catch(error => {
			Fn.buttonShow('', '', '', 'block', '', '', JSON.stringify({
				die: 'block',
				text: Fn.answErr + error.message
			}), '');
		});
	});
	recordSendBlob = form => {
		Fn.buttonShow('', '', '', 'block', '', 'block');
		fetch(Fn.url, {
			method: 'POST',
			headers: {
				contentType: 'application\json'
			},
			body: form
		}).then(response => response.json()).then((ansver) => {
			showPlayAudio(ansver)
		}).catch((err) => {
			console.log(`post: ${err}`)
		})
	}
	const showPlayAudio = ansver => {
		Fn.buttonShow('', '', '', 'block', '', '', JSON.stringify({
			die: 'block',
			text: ansver
		}), '');
		setTimeout(() => {
			document.location.reload(true)
		}, 1000);
	};
	displayAnalyserTime = (a) => {
		if(a === 'false') context.suspend().then(() => {});
		a = context.currentTime.toFixed(0)
		m = Math.floor(a / 60);
		s = Math.round((a / 60 - m) * 60);
		voiceTime.textContent = (m < 10 ? "0" + m : m) + ":" + (s < 10 ? "0" + s : s) + ":" + (((context.currentTime.toFixed(1) - m) * 9).toFixed(2)).split('.')[1];
		array = new Uint8Array(1 * 2);
		analyser.getByteFrequencyData(array);
		for(var i = 0; i < 1; i++) {
			tim = (array[i] / 3.2808);
			document.getElementById("voiceAnalyser").style.width = `${tim}px`
		};
		requestAnimationFrame(displayAnalyserTime);
	}
}).catch(err => {
	console.log(`all:  ${err}`);
});