• Как избежать задержки в конце при проигрывании аудиофайла?

    Okujava-script
    @Okujava-script
    Веб-программист с абсолютным слухом и композитор
    Браузеры не предназначены для таких серьёзных целей, как тренажоры для музыкантов, многодорожечные трекеры, т к их (браузеров) первичная миссия отображать вебстраницы, ну ещё просто слушать музыку. Поэтому поведение аудио не идеально корректно в плане возможных задержек. Для музыкантов лучше использовать десктопные программы - Steinberg Cubase, Steinberg Nuendo и др.
    Ответ написан
    Комментировать
  • Как отловить аудиоконтекст (Web Audio API)?

    Okujava-script
    @Okujava-script
    Веб-программист с абсолютным слухом и композитор
    var player = document.getElementById('player');
    player.onplay = function() {
      var audioCtx = new AudioContext();
      var source = audioCtx.createMediaElementSource(player);
      var analyser = audioCtx.createAnalyser();
      source.connect(analyser); // Подключаем анализатор к элементу audio
      analyser.connect(audioCtx.destination); // Без этой строки нет звука, но анализатор работает.
      var frequencyData = new Uint8Array(analyser.frequencyBinCount);
      var canvas = document.getElementById('myCanvas');
      var ctx = canvas.getContext('2d');
      setInterval(function() {
        analyser.getByteFrequencyData(frequencyData); // Записываем в массив данные уровней частот
        ctx.fillStyle = "blue"; // Задаём цвет фона
        ctx.globalAlpha = 0.05; // Это для получения эффекта плавного погасания полос
        ctx.fillRect(0, 0, canvas.width, canvas.height); // Полупрозрачно чистим экран
        ctx.fillStyle = "gold"; // Задаём цвет полос
        ctx.globalAlpha = 1;
        for (i = 0; i < 1024; i++) {
          ctx.fillRect(i, 255 - frequencyData[i], 1, frequencyData[i]); // рисуем полосу
        }
      }, 20);
    }


    <audio id="player" controls src="https://listen6.myradio24.com/sazdan" crossorigin="anonymous"></audio>
    <br/>
    <br/>
    <!--Подключаем файл-->
    <canvas id="myCanvas" width=1024 height=256 style="background:blue"></canvas>


    Там только в теге аудио поменяйте ссылку на радиопоток на актуальную, т у она устарела.
    Ответ написан
    Комментировать
  • Как из массива целых чисел найти все возможные комбинации (не только двух чисел, а и более) дающие искомую сумму?

    Okujava-script
    @Okujava-script
    Веб-программист с абсолютным слухом и композитор
    Это решение предусматривает вывод списка комбинаций в консоль, бо при попытке выводить такое количество вариантов на странице, она просто виснет. Ведь речь тут идёт о том, что если в массиве 26 элементов, то приходится перебирать количество вариантов, равное 2 в степени 26, что приблизительно 65 миллионов. А это вовсе не шутка.
    const arr = [1, 1, 2, 2, 2, 3, 3, 3, 4, 4, 4, 4, 5, 5, 6, 7, 8, 11, 13, 31, 31, 44, 51, 81, 65, 63];
    const target = prompt("enter number", "52");
    console.log('Список всех вариантов комбинаций:');
    for(a = 0; a < 2 ** arr.length; a ++){
    	let sum = 0;
    	let result = '';
    	let b = a;
    	let r = 0;
    	while(r < arr.length){
    		let c = b;
    		b = Math.floor(b / 2);
    		if(b * 2 != c){
    			sum += arr[r];
    			result += ' + ' + arr[r];
    		}
    		r ++;
    	}
    	if(sum == target) console.log(result.substring(3));
    }
    Ответ написан
    Комментировать
  • Где и как лучше хранить аудиофайлы музыкально плеера?

    Okujava-script
    @Okujava-script
    Веб-программист с абсолютным слухом и композитор
    Хранение аудиофайлов - это прежде всего дело рук ихних правообладателей. Если Вы таковым являетесь, то есть такие варианты:
    • Обычный хостинг. Просто загружаете файлы и ссылки на них можно использовать в плеерах, как src.
    • Сервисы облачного хранения аудиофайлов с двоякой миссией - с которых можно скачивать со страницы для скачивания и они же предоставляют ссылки на файлы, которые можно использовать в плеерах.

    Если же Вы не являетесь правообладателем файлов, то нужно заключить с ним договор, после чего он предоставит ссылки на аудиофайлы, находящиеся на другом сервере, которые можно будет использовать в Вашем плеере не вызывая блокировку типа coors. Так что нет необходимости думать над тем, где хранить сами файлы. Представьте, вдруг у каждого будет такая же идея - сколько придётся копировать одни и те же файлы на разные сервера и хостинговые аккаунты?
    Ещё - нет необходимости хранить в массиве json имена файлов и метаданные. (исполнитель, альбом, жанр) Файлы по ссылкам правообладателей файлы содержат эти метатеги, (даже картинку-превью) и их остаётся только программно прочитать. Для этого подходит библиотека id3-minimized.js. А PHP-функция scandir() навсегда избавит от хранения имён файлов в JS- массивах. Допустим, аудиофайлы у Вас лежат в папке audio:
    <meta charset='utf-8' />
    <script src="id3-minimized.js"></script>
    <?php
    $files = scandir('audio');
    $id = 0;
    for($i = 2; $i < count($files); $i ++){
    	echo '<table><tr><td>
    		<img id=picture'.$id.' />
    		</td><td>
    		<table class=list>
    		<tr><td><b>Название трека: </b></td><td></td></tr>
    		<tr><td><b>Исполнитель: </b></td><td></td></tr>
    		<tr><td><b>Альбом: </b></td><td></td></tr>
    		<tr><td><b>Жанр: </b></td><td></td></tr>
    		<tr><td><b>Год записи: </b></td><td></td></tr>
    		</table>
    		</tr></td></table>
    		<audio src="audio/'.$files[$i].'" controls></audio>';
    	$id ++;
    }
    ?>
    <script>
    let id3Array = 'title, artist, album, genre, year, picture'.split(', ');
    let tracs = document.querySelectorAll('audio');
    let tags = [];
    let amountOfTracks = <?=count($files) - 2; ?>;
    for(j = 0; j < amountOfTracks; j ++){
    	let url = tracs[j].src;
    	ID3.loadTags(url, function() {
    		tags[j] = ID3.getAllTags(url);
    		let image = tags[j].picture;
    		if(image){
    			document.getElementById('picture' + j).style.display = 'block';
    			let base64String = "";
    			for(let i = 0; i < image.data.length; i ++) base64String += String.fromCharCode(image.data[i]);
    			let base64 = "data:" + image.format + ";base64," + window.btoa(base64String);
    			document.getElementById('picture' + j).src = base64;
    		}else{document.getElementById('picture' + j).style.display = 'none'};
        },{
    		tags: id3Array
    	});
    	for(i = 0; i < id3Arraylength - 1; i ++) document.querySelectorAll('.list')[j].querySelectorAll('td')[i * 2 + 1].innerText = eval('tags[j].' + id3Array[i]);
    }
    </script>

    А это простой локальный плеер с плейлистом с использованием такого json, как у Вас на примере трёх альбомов, в каждом из которых три трека:
    <style>
    li{
    	width: 200px;
    	border-radius: 5px;
    }
    </style>
    <audio id=audio controls></audio><br /><br />
    <b>Альбомы: </b>
    <a href=# class=selectAlbum>album1</a> | 
    <a href=# class=selectAlbum>album2</a> | 
    <a href=# class=selectAlbum>album3</a><br /><br />
    <b>Треки:</b>
    <ul id=playlist></ul>
    <script>
    let selectedAlbum;
    let album1=[
    	{
    		name: 'name1',
    		artist: 'artist1',
    		src: 'track1.mp3'
    	},
    	{
    		name: 'name2',
    		artist: 'artist2',
    		src: 'track2.mp3'
    	},
    	{
    		name: 'name3',
    		artist: 'artist3',
    		src: 'track3.mp3'
    	}
    ];
    let album2=[
    	{
    		name: 'name4',
    		artist: 'artist4',
    		src: 'track4.mp3'
    	},
    	{
    		name: 'name5',
    		artist: 'artist5',
    		src: 'track5.mp3'
    	},
    	{
    		name: 'name6',
    		artist: 'artist6',
    		src: 'track6.mp3'
    	}
    ];
    let album3=[
    	{
    		name: 'name7',
    		artist: 'artist7',
    		src: 'track7.mp3'
    	},
    	{
    		name: 'name8',
    		artist: 'artist8',
    		src: 'track8.mp3'
    	},
    	{
    		name: 'name9',
    		artist: 'artist9',
    		src: 'track9.mp3'
    	}
    ];
    let albums = document.querySelectorAll('.selectAlbum');
    for(i = 0; i < albums.length; i ++){
    	albums[i].onclick = function(){
    		audio.pause();
    		playlist.innerText = '';
    		selectedAlbum = eval(this.innerText);
    		for(j = 0; j < selectedAlbum.length; j ++){
    			let li = document.createElement('li');
    			li.id = j;
    			li.style.cursor = 'pointer';
    			li.innerHTML = '&nbsp;&nbsp;&nbsp;' + selectedAlbum[j].artist + ' - ' + selectedAlbum[j].name;
    			li.onclick = function(){
    				for(h = 0; h < selectedAlbum.length; h ++)document.getElementById(h).style.background = 'white';
    				this.style.background = 'gold';
    				audio.src = 'audio/' + selectedAlbum[this.id].src;
    				audio.play();
    			}
    			playlist.append(li);
    		}
    	}
    }
    </script>

    Выбираете альбом, появляется список его треков. Кликом по названию трека запускаете его воспроизведение.
    Ответ написан
    2 комментария
  • Как расположить точки на окружности?

    Okujava-script
    @Okujava-script
    Веб-программист с абсолютным слухом и композитор
    Этот пример не затрагивает CSS, а реализован только на JS. Так как углы на JS измеряются в радианах, а длина окружности равна количеству радиан, равному числу пи * 2, (приблизительно 6.28, это количество радиусов из которых состоит окружность) организовываем цикл от нуля до пи * 2. А вот шаг итераций задаём поделив 6.28 на количество точек, которое нам нужно равномерно расставить на окружности.
    <canvas id=canvas width=200 height=200></canvas>
    let r = 90; // радиус
    let amountOfPoints = 7; // количество точек
    let x, y;
    let ctx = canvas.getContext('2d');
    for(i = 0; i < Math.PI * 2; i += Math.PI * 2 / amountOfPoints){
    	x = canvas.width / 2 + r * Math.sin(i);
    	y = canvas.height / 2 + r * Math.cos(i);
    	ctx.fillRect(x, y, 2, 2);
    }
    Ответ написан
    Комментировать
  • Как можно анимировать звуковую волну?

    Okujava-script
    @Okujava-script
    Веб-программист с абсолютным слухом и композитор
    Это не "3D" волна, а только наложение состояний меняющейся кривой в 2Д-пространстве. Анимировать можно с помощью WebAudio Api:
    <html>
    <head>
    <title>визуализатор</title>
    <meta charset="utf-8" />
    <style>
    body{
    	background: #003;
    	font-family: arial;
    }
    #myCanvas{
    	border-width: 3px;
    	border-color: white;
    	border-radius: 15px;
    	border-style: solid;
    	box-shadow: 0 0 15px 15px #7e7;
    	animation: spin-counter 5s linear infinite;
    }
    @keyframes spin-counter {
    	from{
    		box-shadow: 0 0 5px 5px #7e7;
    		border-color: white;
    	}
    	to{
    		box-shadow: 0 0 15px 15px pink;
    		border-color: gold;
    	}
    }
    </style>
    </head>
    <body><center>
    <canvas id="myCanvas" width=1024 height=256 style="background:blue"></canvas><br /><br />
    <audio src=sound.mp3' controls></audio>
    </center></body>
    <script>
    var audio = document.querySelector('audio');
    audio.onplay = function(){
    	var audioCtx = new AudioContext();
    	var source   = audioCtx.createMediaElementSource(audio);
    	var analyser = audioCtx.createAnalyser();
        source.connect(analyser); // Подключаем анализатор к элементу audio
        analyser.connect(audioCtx.destination); // Без этой строки нет звука, но анализатор работает.
    	var frequencyData = new Uint8Array(analyser.frequencyBinCount);
    	var canvas = document.getElementById('myCanvas');
    	var ctx = canvas.getContext('2d');
    	var counter = 0;
    	setInterval(function(){
    		analyser.getByteFrequencyData(frequencyData); // Записываем в массив данные уровней частот
    		ctx.fillStyle = "black"; // Задаём цвет фона
    		ctx.globalAlpha = 0.05; // Это для получения эффекта плавного погасания полос
    		ctx.fillRect (0, 0, canvas.width, canvas.height); // Полупрозрачно чистим экран
    		ctx.globalAlpha = 1;
    		ctx.strokeStyle = '#3f9';
    		ctx.beginPath();
    		ctx.moveTo(Math.floor(150 * Math.sin(counter / 1)), 255 - frequencyData[0]);
    		for(i = 1; i < 1024; i ++) ctx.lineTo(i + Math.floor(350 * Math.sin(i / 15)), 255 - frequencyData[i]);
    		ctx.stroke();
    		counter ++;
    	}, 20);
    }
    </script>
    </html>

    ссылочка
    То, как будут выглядеть линии, зависит от того, какой алгоритм Вы задействуете для отображения.
    Ответ написан
    Комментировать
  • Как сделать появление второго 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);
    	};
    });
    Ответ написан
    2 комментария
  • Нужно ли делать валидацию формы на фронте и бэке одновременно?

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

    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() не рекимендую применять, так как в случае, если попытка воспроизвести вызывает ошибку, (на пример, по ходу загрузки страницы) то эта ошибка будет одна и та же появляться в консоли с офигенной частотой, страница может повиснуть.
    Ответ написан
    5 комментариев
  • Можно ли сделать так, чтобы ссылка срабатывала на событие 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 комментария