• Как сделать появление второго select при выборе значения в первом html\php?

    Okujava-script
    @Okujava-script
    Веб-программист с абсолютным слухом и композитор
    Есть пример для трёх взаимосвязанных селектов:
    Страна: <select id="country_id" class="StyleSelectBox">
        <option value="0">- выберите страну -</option>
        <option value="1">Россия</option>
        <option value="2">Украина</option>
        <option value="3">Белорусь</option>
    </select>
    <br /><br />Регион:
    <select id="region_id" disabled>
        <option value="0">- Выберите регион -</option>
    </select></td><td>
    <br /><br />Город:
    <select id="city_id" disabled>
        <option value="0">- Выберите город -</option>
    </select>

    var all_regions=[];
    var all_cites=[[],[],[]];
      
    all_regions[0]=["московская обл","ростовская обл","саратовская обл"];
    all_regions[1]=["киевская обл","львовская обл","харьковская обл"];
    all_regions[2]=["минская обл","брестская обл","гроднинская обл"];
      
    all_cites[0][0]=["Москва","Химки","Калуга"];
    all_cites[0][1]=["Такой-то город","Такой-то город","Калуга"];
    all_cites[0][2]=["Такой-то город","Такой-то город","Такой-то город"];
      
    all_cites[1][0]=["Киев","Жмеринка","Бердычев"];
    all_cites[1][1]=["Львов","Сокаль","Стрый"];
    all_cites[1][2]=["Харьков","Полтава","Пирятин"];
      
    all_cites[2][0]=["Минск","Такой-то город","Такой-то город"];
    all_cites[2][1]=["Брест","Такой-то город","Такой-то город"];
    all_cites[2][2]=["Гродно","Такой-то город","Вильно"];
      
    country_id.onchange=function(){
        region_id.disabled=false;
        region_id.innerHTML="<option value='0'>- Выберите регион -</option>";
        myregion=this.value-1;
        if(myregion!=-1){
            for(var i=0;i<all_regions[myregion].length;i++){
                region_id.innerHTML+='<option value="'+(i+1)+'">'+all_regions[myregion][i]+'</option>';
            }
        }else{
            region_id.disabled=true;
            city_id.disabled=true;
        }
    }
      
    region_id.onchange=function(){
        city_id.disabled=false;
        city_id.innerHTML="<option value='0'>- Выберите город -</option>";
        var mycite=this.value-1;
        if(mycite!=-1){
            for(var i=0;i<all_cites[myregion][mycite].length;i++){
                city_id.innerHTML+='<option value="'+(i+1)+'">'+all_cites[myregion][mycite][i]+'</option>';
            }
        }else{
            city_id.disabled=true;
        }
    }
    Ответ написан
    2 комментария
  • Как правильно выводить длину видео?

    Okujava-script
    @Okujava-script
    Веб-программист с абсолютным слухом и композитор
    Но разве удобно использовать такой странный метод, как toISOString() :) Я бы сделал так:
    const a = 'https://www.w3schools.com/html/mov_bbb.mp4';
    const b = 'https://assets.codepen.io/6093409/hubspot-video-example.mp4';
    
    const arr = [a, b];
    
    arr.map((item) => {
    	let media = new Audio(item);
    	media.onloadedmetadata = function () {
    		let date = new Date(this.duration * 1000);
    		let h = date.getUTCHours();
    		h = h ? h + ':' : '';
    		let m = date.getMinutes();
    		let s = date.getSeconds();
    		console.log(h + m + ':' + s);
    	};
    });
    Ответ написан
  • Нужно ли делать валидацию формы на фронте и бэке одновременно?

    Okujava-script
    @Okujava-script
    Веб-программист с абсолютным слухом и композитор
    Валидацию на JS пользователь может отключить с помощью консоли. Если нет валидации на PHP, то пользователь может загрузить на сервак любой PHP-файл (скажем, вместо аватара) и потом запустить его на выполнение. (sql-иньекции и все такое) Так что от сюда и вывод по поводу должна ли быть валидация на PHP.
    Ответ написан
    Комментировать
  • Как получить то, что написал пользователь в реальном времени??

    Okujava-script
    @Okujava-script
    Веб-программист с абсолютным слухом и композитор
    Можно если не WebSocket, то использовать технологию ajax (fetch), которая будет периодически принимать обновлённое содержимое поля для ввода. В следующем простейшем примере будем использовать три файла на сервере:
    index.html
    <textarea id=txt oninput='send(this.value)'></textarea>
    <script>
    async function send(text){await fetch('script.php?text=' + text)};
    async function get(){txt.value = await (await fetch('file.txt')).text()};
    get();
    setInterval(get, 5000);
    txt.focus();
    </script>

    script.php
    $text = $_GET['text'];
    $file = fopen('file.txt', 'w');
    fwrite($file, $text);
    fclose($file);

    file.txt - изначально пустой файл.
    Все три файла в этом примере должны быть в одной папке.
    Суть работы такова: когда каждый, у кого открыт index.html делает любое изменение содержимого textarea, все остальные, у кого он открыт, видят это изменение в режиме реального времени. Это даже можно назвать примером простейшего чата на несколько строк. Можно переделать и использовать для отслеживания в реальном времени того, что вводят в поле для ввода.

    Второй вариант: всё, что вводит, исправляет и вытирает пользователь, записывается в массив, потом этот массив отправляется на сервер, от куда его можно скачать и прочитать в любое удобное время. При чтении происходит анимация, воспроизводящая запись всех действий пользователя в поле для ввода текста. Вот упрощённая рабочая схема:
    <textarea id=txt cols=50 rows=10 oninput='array.push(this.value)' placeholder='введите текст:'></textarea><br /><br />
    <button onclick='read()'> прочитать </button>
    <button onclick='reset()'> очистить </button>
    <script>
    let array = [];
    const read = _ => {
    	let index = 0;
    	let interval = setInterval(function(){
    		txt.value = array[index];
    		index ++;
    		if(index >= array.length) clearInterval(interval);
    	}, 300);
    }
    const reset = _ => {
    	txt.value = '';
    	array = [];
    }
    txt.focus();
    </script>
    Ответ написан
  • Как изменить формат в миллисекундах в плеере?

    Okujava-script
    @Okujava-script
    Веб-программист с абсолютным слухом и композитор
    var ds = Math.floor(music.duration % 60);
    ds = ds < 10 ? '0' + ds : ds;
     // ... 
    var cs = Math.floor(music.currentTime % 60);
    cs = cs < 10 ? '0' + cs : cs;
    Ответ написан
    Комментировать
  • Как сделать вывод значения ползунка в поле input?

    Okujava-script
    @Okujava-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' />
    Ответ написан
    Комментировать
  • Как сделать, что бы при нажатии на фото воспроизводилась музыка?

    Okujava-script
    @Okujava-script
    Веб-программист с абсолютным слухом и композитор
    <audio id=audio src="sound.mp3" controls></audio>
    <img id=img src="image1.jpg" />
    <button id=btn onclick="playPause()"> play </button>
    const playPause = _ => {
       if(audio.paused){
          audio.play();
          btn.textContent = " pause ";
          img.src = "image2.jpg";
       }else{
          audio.pause();
          btn.innerText = " play ";
          img.src = "image1.jpg";
       }
    }
    Ответ написан
    Комментировать
  • Как каждую кнопку сделать уникальной?

    Okujava-script
    @Okujava-script
    Веб-программист с абсолютным слухом и композитор
    <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>

    Правда, не знаю, как это сделать на jquery.
    Ответ написан
    Комментировать
  • Как воспроизвести зацикленный звук в неактивной вкладке?

    Okujava-script
    @Okujava-script
    Веб-программист с абсолютным слухом и композитор
    Если используете элемент аудио, то для циклического воспроизведения больше всего подходит атрибут loop внутри тега:
    <audio src='sound.mp3' controls loop></audio>
    Работает железно во всех браузерах и случаях. А вот requestAnimationFrame() не рекимендую применять, так как в случае, если попытка воспроизвести вызывает ошибку, (на пример, по ходу загрузки страницы) то эта ошибка будет одна и та же появляться в консоли с офигенной частотой, страница может повиснуть.
    Ответ написан
  • Можно ли сделать так, чтобы ссылка срабатывала на событие mousedown, а не onclick?

    Okujava-script
    @Okujava-script
    Веб-программист с абсолютным слухом и композитор
    <a href="http://www.site.com" onmousedown='this.click()'>Ссылка</a>
    Ответ написан
    Комментировать
  • Как написать логику sms инпут на javascript?

    Okujava-script
    @Okujava-script
    Веб-программист с абсолютным слухом и композитор
    <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>
    Ответ написан
    Комментировать
  • Как получить график громкости аудио без его воспроизведения?

    Okujava-script
    @Okujava-script
    Веб-программист с абсолютным слухом и композитор
    Декодирование аудиоданных из аудиофайла с помощью WebAudio Api можно действительно делать без воспроизведения этого файла. А это значит, что это может происходить по ходу загрузки страницы, и клики при этом не нужны.
    <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>
    62bb7dc72e0ba998610708.jpeg
    Ответ написан
    Комментировать
  • Как убрать кнопку скачать из аудио html?

    Okujava-script
    @Okujava-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>

    Но с помощью консоли всё равно можно это обойти и скачать.
    Ответ написан
    Комментировать
  • Можно ли и как обработать ajax в js?

    Okujava-script
    @Okujava-script
    Веб-программист с абсолютным слухом и композитор
    Для передачи данных с одной страницы на другую не обязательны ajax и localStorage. На первой странице достаточно ссылки такого типа:
    <a href="http://site.com?id=1&name=vasya">Передать</a>

    а на второй странице должен быть такой принимающий JS-код:
    let result = new URL(location.href).searchParams.get("id");  // или get("name");
    console.log(result);
    Ответ написан
    2 комментария
  • Почему mediaRecorder работает некорректно?

    Okujava-script
    @Okujava-script
    Веб-программист с абсолютным слухом и композитор
    Хочу ещё другой код предложить:
    <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>

    Перематывается, воспроизводится в MPC-HC, время записи не ограничивается.
    Ответ написан
    Комментировать
  • Как сделать корректную прокрутку видео в моем длеер?

    Okujava-script
    @Okujava-script
    Веб-программист с абсолютным слухом и композитор
    Тут такая ошибка: строку
    progress.oninput = () => currentTime = progress.value;

    следует переписать так:
    progress.oninput = () => video.currentTime = progress.value;

    И всё будет работать.
    Ответ написан
  • Как в input type='range’ сделать прокрутку видео?

    Okujava-script
    @Okujava-script
    Веб-программист с абсолютным слухом и композитор
    Если сразу после объявления элемента видео пытаться прочитать продолжительность видео, то браузер не успевает извлечь из видеофайла эту информацию. Чтобы обойти эту ситуацию, достаточно чтение video.duration обернуть функцией onloadeddata или onloadedmetadata. Т. е., строку
    range.setAttribute('max', video.duration);
    переписать так:
    video.onloadeddata = () => range.setAttribute('max', video.duration);
    Ответ написан
    Комментировать
  • Нахождение через ссылку на песню. (их 4 но я показал вам 1 для примера)?

    Okujava-script
    @Okujava-script
    Веб-программист с абсолютным слухом и композитор
    files.fm - это облачное хранилище файлов, используйте обычный хостинг. Ссылка на файл должна быть типа www.mysite.com/audio/sound.mp3, то бишь полный путь должен заканчиваться на .mp3, Проверьте ещё раз хостинг, на котором плеер, обычно все (если) бесплатные хостинги поддерживают загрузку аудиофайлов не превышающих 5 мегабайт по размеру.

    Ещё если открыть меню этого файла на этом сервере files.fm и выбрать пункт Links и подпункт Direct link including full path, то там будет такая ссылка:
    https://files.fm/pa/andrejkulacenko1/audio/0.mp3
    Но к сожалению она для Вашего плеера не годится, в консоли та же ошибка.

    Ещё есть хороший вариант в этом же меню выбрать подпункт For embedding on websites, там находится ссылка для вставки на сайт музыки вместе с плеером:
    <script type="text/javascript" src="https://files.fm/embed/player?hash=vdp2sbxg3&w=100%&h=auto" id="filesfm_embed_js__vdp2sbxg3"></script>

    Работает железно. Так что если это использовать, то можно дальше двигаться по такому пути: выести на страницу один ихний плеер и при каждом обновлении страницы случайно подставлять в его код эдэнтификаторы vdp2sbxg3, jvzg6fkxz, ku6jfqz39 или sxde4aycm.
    Ответ написан
    Комментировать
  • Как сделать круговое расположение букв в словах?

    Okujava-script
    @Okujava-script
    Веб-программист с абсолютным слухом и композитор
    <h1 id=h1></h1>
    <script>
    let radius = 70;
    let text = "corporate*service*";
    let step = Math.PI * 2 / text.length;
    for(i = 0; i < text.length; i ++){
    	let x = radius + radius * Math.sin(i * step);
    	let y = radius + radius * Math.cos(i * step);
    	let myspan = document.createElement("span");
    	myspan.innerText = text[i];
    	myspan.style.position = "absolute";
    	myspan.style.left = x + "px";
    	myspan.style.bottom = y + "px";
    	myspan.style.transform = "rotateZ(" + i * 360 / text.length + "deg)";
    	h1.appendChild(myspan);
    }
    </script>
    Ответ написан
    Комментировать
  • Вывод контента на страницу средствами JS. Как лучше реализовать?

    Okujava-script
    @Okujava-script
    Веб-программист с абсолютным слухом и композитор
    Целесообразно, ссылку на portfolio.html формируем так: portfolio.html?id=1&name=mytovar, а вот метод location.search устарел, в этом случае сейчас извлекают так:
    var url = new URL(location.href);
    var id = url.searchParams.get("id");
    var name = url.searchParams.get("name");
    console.log(id + ", " + name);
    Ответ написан
    Комментировать