<?
$cookieColor = isset($_COOKIE['theme']) ? intval($_COOKIE['theme']) : 0; // ожидает передачи в куку theme - числа
$colorTheme = $cookieColor < 1 ? '#000' : '#fff';
?>
<meta name="theme-color" content="<?=$colorTheme?>" />window.addEventListener('beforeunload', function(event) {
event.preventDefault(); // для того чтобы браузер показал пользователю сообщение
});
document.getElementById('intro_btn').onclick = function() {
document.getElementById('main').classList.add('main--main-bg');
}
i? Попробуйте так:for (let i = 0, len = match.length; i < len; i += 4) {
parts.push(match.substring(i, i + 4));
}addEventListener.oninput = function(). Попробуйте так:inputus[i].addEventListener('input', () => {
this.value = cc_format(this.value);
});for (let i = 0; i < inputus.length; i++) {
inputus[i].addEventListener('input', function() {
this.value = cc_format(this.value);
});document.querySelector('.className') возвращает один Node элемент, document.querySelectorAll('.className') возвращает коллекцию Node элементов, которые нужно перебрать в цикле, чтобы на каждый повесить обработчик 
const block = document.getElementById('your-block-id'); // Замените 'your-block-id' на актуальный идентификатор вашего блока
if (block.scrollWidth > block.offsetWidth) {
// Текст обрезается и появляется троеточие
// В этом случае вы можете добавить обработчик события наведения мыши, чтобы показать тултип
block.addEventListener('mouseenter', showTooltip);
block.addEventListener('mouseleave', hideTooltip);
} else {
// Текст полностью умещается в блоке
// В этом случае вы можете удалить обработчики событий или не отображать тултип вообще
block.removeEventListener('mouseenter', showTooltip);
block.removeEventListener('mouseleave', hideTooltip);
}
function showTooltip() {
// Код для показа тултипа
}
function hideTooltip() {
// Код для скрытия тултипа
}
<center>
<button id="startButton"> запись </button>
<button id="stopButton"> стоп </button><br /><br />
<video id="preview" width="320" height="240" style="border-style: solid" autoplay muted></video>
<video id="recording" width="320" height="240" controls hidden></video><br /><br />
<a id="downloadButton" hidden>скачать</a>
</center>
<script>
function startRecording(stream, lengthInMS) {
let recorder = new MediaRecorder(stream);
let data = [];
recorder.ondataavailable = event => data.push(event.data);
recorder.start();
let stopped = new Promise((resolve, reject) => {
recorder.onstop = resolve;
recorder.onerror = event => reject(event.name);
});
return Promise.all([stopped, new Promise(resolve => setTimeout(resolve, lengthInMS)).then(() => recorder.state == "съёмка" && recorder.stop())]).then(() => data);
}
startButton.addEventListener("click", function() {
navigator.mediaDevices.getUserMedia({
video: true,
audio: true
}).then(stream => {
preview.srcObject = stream;
preview.captureStream = preview.captureStream;
return new Promise(resolve => preview.onplaying = resolve);
}).then(() => startRecording(preview.captureStream(), 5000)).then (recordedChunks => {
recording.hidden = false;
preview.hidden = true;
recording.src = downloadButton.href = URL.createObjectURL(new Blob(recordedChunks, { type: "video/webm" }));
recording.play();
downloadButton.hidden = false;
downloadButton.download = "RecordedVideo.webm";
});
}, false);
stopButton.addEventListener("click", function() {preview.srcObject.getTracks().forEach(track => track.stop())}, false);
recording.onended = () => recording.currentTime = 0;
</script><style>
.contayner{
position: absolute;
}
audio{
position: absolute;
width: 400px;
}
#zaslonka{
position: absolute;
width: 60px;
height: 32px;
top: 11px;
background: rgb(241, 243, 244);
}
</style>
<center>
<div class=contayner>
<audio id=audio src='http://tolmatux.strana.de/audio/sol.mp3' controls></audio>
<div id=zaslonka></div>
</div>
<script>
zaslonka.style.left = parseInt(window.getComputedStyle(audio).width) - 73 + 'px';
</script><html>
<head>
<meta charset="utf-8">
<title>Визуализатор</title>
<style>
#canvas{
position: absolute;
top: 50px;
left: 0px;
background: #333;
}
#progress{
position: absolute;
top: 50px;
left: 0px;
background: rgba(255, 155, 0, 0.5);
width: 0px;
height: 256px;
}
</style>
</head>
<body bgcolor=#444>
<audio id=audio src="sound.mp3" controls></audio>
<canvas id=canvas width=512 height=256></canvas>
<div id=progress></div>
<script>
var audio = document.getElementById("audio");
var ctx = canvas.getContext("2d");
var color_L = "#7cf", color_R = "#f7c"; // Цвета осциллограмм левого и правого стереоканалов
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
audio.onplay = function(){b = setInterval(function(){progress.style.width = Math.floor(audio.currentTime / audio.duration * canvas.width) + "px"}, 100)};
audio.onended = function(){
this.currentTime = 0;
clearInterval(b);
progress.style.width = "0px";
}
var source = audioCtx.createBufferSource();
var request = new XMLHttpRequest();
request.open('GET', audio.src, true);
request.responseType = 'arraybuffer';
request.onload = function(){
var audioData = request.response;
audioCtx.decodeAudioData(audioData, function(buffer){
source.buffer = buffer;
data_L = buffer.getChannelData(0);
data_R = buffer.getChannelData(1); // Если аудиофайл моно - поменяйте в этой сроке единицу на ноль.
// При несоответствии количества стереоканалов - ошибка в консоли и код не работает.
for(var i = 0; i < data_L.length; i++){
var x = Math.floor(i / data_L.length * canvas.width);
var L = data_L[i] * canvas.height / 4;
var R = data_R[i] * canvas.height / 4;
if(Math.floor(i / 16) == i / 16){ // Число 16 для больших аудиофайлов лучше побольше. Нужно подбирать.
ctx.fillStyle = color_L;
ctx.fillRect(x, canvas.height * 0.25 + L, 1, -L);
ctx.fillStyle = color_R;
ctx.fillRect(x, canvas.height * 0.75 + R, 1, -R);
}
}
},
function(e){"Error with decoding audio data" + e.err});
}
request.send();
canvas.onmousedown = progress.onmousedown = function(e){
progress.style.width = e.pageX + "px";
audio.currentTime = e.pageX / canvas.width * audio.duration;
}
canvas.ondblclick = function(){audio.play()};
ctx.fillStyle = color_L;
ctx.fillRect(0, canvas.height * 0.25, canvas.width, 1);
ctx.fillStyle = color_R;
ctx.fillRect(0, canvas.height * 0.75, canvas.width, 1);
</script>
</body>
</html>
<style>
td{
width: 50px;
height: 25px;
text-align: center;
font-size: 20px;
}
hr{
width: 70%;
display: none;
}
</style>
<table cellspacing=0>
<tr id=numbers></tr>
<tr id=cursors></tr>
</table>
<script>
let index = 0;
let code = '';
let input = false;
for(i = 0; i < 4; i ++){
let number = document.createElement('td');
number.id = 'i' + i;
numbers.append(number);
let forcursor = document.createElement('td');
cursors.append(forcursor);
let cursor = document.createElement('hr');
cursor.id = 'c' + i;
forcursor.append(cursor);
}
const putSMSCode = _ => {
input = true;
document.getElementById('c' + index).style.display = 'block';
}
putSMSCode();
document.onkeydown = e => {
if(input){
if(index < 3){
document.getElementById('c' + (index + 1)).style.display = 'block';
}
document.getElementById('c' + index).style.display = 'none';
code += e.key;
document.getElementById('i' + index).innerHTML = '<b>' + e.key + '</b>';
index ++;
if (index >= 4) {
index = 0;
input = false;
console.log(code);
}
}
}
</script><audio src='sound.mp3' controls loop></audio>
<style>
.btn__play{
width: 70px;
cursor: pointer;
border-radius: 10px;
}
</style>
track1: <button class=btn__play> Play </button><br /><br />
track2: <button class=btn__play> Play </button><br /><br />
track3: <button class=btn__play> Play </button>
<audio class=aud src='https://mysynthesizer.github.io/index.hetemeel/track1.mp3'></audio>
<audio class=aud src='https://mysynthesizer.github.io/index.hetemeel/track2.mp3'></audio>
<audio class=aud src='https://mysynthesizer.github.io/index.hetemeel/track3.mp3'></audio>
<script>
var btn = document.querySelectorAll('.btn__play');
var aud = document.querySelectorAll('.aud');
function playPause(index) {
btn[index].addEventListener('click', () => {
if(btn[index].textContent === 'Pause') {
btn[index].textContent = 'Play';
aud[index].pause();
} else {
btn[index].textContent = 'Pause';
aud[index].play();
}
});
}
for(i = 0; i < btn.length; i ++){
playPause(i);
aud[i].onended =_=> btn[i].textContent = 'Play';
}
</script>Начальное значение:
<input id=r1 type=range value=20 oninput='n1.value = this.value' />
<input id=n1 type=number value=20 oninput='r1.value = this.value' /><br /><br />
Конечное значение:
<input id=r2 type=range value=80 oninput='n2.value = this.value' />
<input id=n2 type=number value=80 oninput='r2.value = this.value' />