Создаю сайты, обладаю знаниями HTML, CSS, JavaScript, PHP.
Пишу программы на VB, C++, Delphi, Assembler. Аудио/видеомонтаж.
Контакты
Местоположение
Польша, Chelm

Наибольший вклад в теги

Все теги (7)

Лучшие ответы пользователя

Все ответы (27)
  • Как сделать функцию которая отключает/включает звук со всех видео в разных местах?

    Okujava-script
    @Okujava-script
    Веб-программист с абсолютным слухом и композитор
    Если нужно, чтобы через один раз включался/выключался звук, то можно третью строку кода Сергея Соколова переписать так:
    if(video.muted == true){ video.muted = false } else { video.muted = true };
     // или так:
    video.muted = video.muted ? false : true;
    Ответ написан
    Комментировать
  • Как получить график громкости аудио без его воспроизведения?

    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
    Ответ написан
    Комментировать
  • Как сделать круговое расположение букв в словах?

    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>
    Ответ написан
    Комментировать
  • Как в input type='range’ сделать прокрутку видео?

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