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

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

Все теги (6)

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

Все ответы (25)
  • Как получить график громкости аудио без его воспроизведения?

    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);
    Ответ написан
    Комментировать
  • Как сделать функцию которая отключает/включает звук со всех видео в разных местах?

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

    Okujava-script
    @Okujava-script
    Веб-программист с абсолютным слухом и композитор
    После каждого перехода по ссылке придётся покинуть страницу, поэтому требуется сохранение текущей ссылки в куки или localStorage. В этом примере используется localStorage.
    <a id=mya href=#>Ссылка</a>
    <script>
    let linx = ['http://site.ru', 'http://mysite.ru', 'http://site.com', 'http://mysite.com', 'http://meineliebesite.ru']; // список сайтов
    if(!localStorage.getItem('siteNumber')){
    	localStorage.setItem('siteNumber', '0');
    }
    mya.href = linx[localStorage.getItem('siteNumber')];
    mya.onclick = () => {
    	let a = localStorage.getItem('siteNumber');
    	a ++;
    	if(a >= linx.length) a = 0;
    	localStorage.setItem('siteNumber', a);
    }
    </script>
    Ответ написан
    Комментировать