Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 29.09.2016, 09:03
Интересующийся
Отправить личное сообщение для lucky89 Посмотреть профиль Найти все сообщения от lucky89
 
Регистрация: 27.10.2014
Сообщений: 16

Как загрузить аудио файл пользователя в audio bufer
Здравствуйте!
Подскажите, можно ли как-то загрузить аудио файл пользователя в audio bufer для дальнейшей работы с ним средствами Web Audio API ?
То есть хочу, чтобы пользователь нажимал в браузере кнопку "Выбрать песню на диске", ему открывался Проводник, юзер выбирает трек и тот грузится в audio bufer.
По url аудиофайлы знаю как получать, но нужно, чтобы юзер мог в любой момент подгружать свои звуки. Именно сразу в audio bufer, на сервере его mp3 хранить не нужно.
Ответить с цитированием
  #2 (permalink)  
Старый 29.09.2016, 10:48
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,480

Если нужно работать "с ним средствами Web Audio API", то буффер тут не нужен.)
<audio controls="true"></audio><br>
<input type="file" accept="audio/*" />
<script>
var files = document.querySelector('input'),
	audio = document.querySelector('audio');

files.addEventListener('change', function(){
	audio.src = URL.createObjectURL(this.files[0]);  
});
audio.addEventListener('canplay', function(){
	this.play();

	var context = new AudioContext();
	var input = context.createMediaElementSource(this);
	//... здесь творим что нам надо
	input.connect(context.destination);
});
</script>

А если нужен именно буффер то вам потребуется FileReader.readAsArrayBuffer() и AudioContext.decodeAudioData().
__________________
29375, 35
Ответить с цитированием
  #3 (permalink)  
Старый 29.09.2016, 21:46
Аватар для Опан
Кандидат Javascript-наук
Отправить личное сообщение для Опан Посмотреть профиль Найти все сообщения от Опан
 
Регистрация: 15.03.2013
Сообщений: 100

Декодированные аудиоданные могут потребоваться, если нужно просмотреть их в каком-то другом представлении, скажем, в виде текста или в шестнадтцатеричном виде, или чтобы построить диаграмму. А для воспроизведения они по-любому должны находится в каком-то из стандартных аудиоформатов. и не зависимо, где - на сервере или локалке, в файле или оперативной памяти.
Не знаю, какие негаразды могуд вызвать необходимость делить на части процесс воспроизведения музыки - сначала в буфер, а потом всё остальне? Обычно применение <audio src="..."> или флешплееров решает все задачи надёжности и быстродействия. К тому же я не допонял, о каких своих звуках пользователя идёт речь.

Последний раз редактировалось Опан, 29.09.2016 в 22:46.
Ответить с цитированием
  #4 (permalink)  
Старый 30.09.2016, 10:54
Интересующийся
Отправить личное сообщение для lucky89 Посмотреть профиль Найти все сообщения от lucky89
 
Регистрация: 27.10.2014
Сообщений: 16

Сообщение от Опан Посмотреть сообщение
Декодированные аудиоданные могут потребоваться, если нужно просмотреть их в каком-то другом представлении
Нужны. Это игра типа Audiosurf, на основе трека строится карта и юзер ее проходит под свою же музыку.
Уже смог загрузить и в audio и в буфер.
Aetae, спасибо!
При загрузке в audio страница есть 40 Мб оперативной памяти, а если в буфер, то 150Мб. Вот и думаю может и без буфера обойтись получится.
---
Писал другую игрушку, вот она: http://printmusic.ru/ (нужна клавиатура и колонки, с мобильных устройств не загрузится, если только клаву через OTG не подключите). Так вот в ней я звуки нот все 128 штук каждую грузил в буфер, от туда уже по нажатиям кнопок они играют. Игра тоже многовато памяти ест... Может есть более правильный способ для загрузки звуков в игры?
Ответить с цитированием
  #5 (permalink)  
Старый 30.09.2016, 12:18
Аватар для Опан
Кандидат Javascript-наук
Отправить личное сообщение для Опан Посмотреть профиль Найти все сообщения от Опан
 
Регистрация: 15.03.2013
Сообщений: 100

Сообщение от lucky89 Посмотреть сообщение
Так вот в ней я звуки нот все 128 штук каждую грузил в буфер, от туда уже по нажатиям кнопок они играют.
Лишние хлопоты. Можете записать один МП3-файл общей длительностью с одну песню, в котором бы по очереди проигрывались все звуки для игры (или ноты), и элементом аудио в нужный момент воспроизводить нужный участок этого файла, содержащий соответствующий звук. И будете использовать только 5-7 мб оперативки вместо 150. Хотя может построение карты стоит таких затрат.
Я тут попытался разработать алгоритм, синтезирующий музыкальные звуки вообще без сохранения в файл. В моём примере суть в том, что в результате действия случайных настроек после каждого обновления страницы они звучат уже по-другому и никогда не повторяются. Вот ссылка. Страница ест до 200 мб памяти и грузится от трёх секунд. Но если вместо целого рингтона генерировать одну ноту, то затраты будут меньшими. Не знаю, на сколько правильно всё это решение, но что, если его использовать для игры?
Ответить с цитированием
  #6 (permalink)  
Старый 30.09.2016, 12:56
Интересующийся
Отправить личное сообщение для lucky89 Посмотреть профиль Найти все сообщения от lucky89
 
Регистрация: 27.10.2014
Сообщений: 16

Сообщение от Опан Посмотреть сообщение
и элементом аудио в нужный момент воспроизводить нужный участок этого файла, содержащий соответствующий звук.
А элемент audio многопоточность поддерживает? Там же и по 10 звуков одновременно бывает надо запускать. То есть 1 элемент audio должен одновременно начать воспроизводить несколько своих кусков, при чем надо иметь возможность каждым, уже звучащим куском управлять по отдельности: какой приглушить, какой ускорить, какой выключить и забыть...
Строить карту - это разовая процедура, это до начала игры происходит (создается большой массив в переменной, но он почти ничего не весит в плане памяти), так что по ходу игры оно не влияет на потребляемую память.
--
В твоем сайте прямо средствами web audio api из "цифр и знаков" синтезируются звуки? Ты можешь любую ноту любого инструмента закодить?

Последний раз редактировалось lucky89, 30.09.2016 в 13:09.
Ответить с цитированием
  #7 (permalink)  
Старый 30.09.2016, 13:10
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

lucky89,
https://github.com/stewdio/beep.js
https://github.com/miroshko/Synzer
Ответить с цитированием
  #8 (permalink)  
Старый 30.09.2016, 13:48
Аватар для Опан
Кандидат Javascript-наук
Отправить личное сообщение для Опан Посмотреть профиль Найти все сообщения от Опан
 
Регистрация: 15.03.2013
Сообщений: 100

Элемент аудио многопоточность и ускорение не поддерживают (обещают в будущем.) Можно использовать много элементов на странице.
Сообщение от lucky89
В твоем сайте прямо средствами web audio api из "цифр и знаков" синтезируются звуки? Ты можешь любую ноту любого инструмента закодить?
web audio api я не использую. Только заливаю данными массив типа blob, его можно использовать, как медиаисточник для элемента аудио.
Да, могу любую ноту и последовательность, но не традиционними инструменами, а звуком синтезатора (типа, как когда-то были аналоговые) с разными настройками.

Последний раз редактировалось Опан, 01.10.2016 в 11:31.
Ответить с цитированием
  #9 (permalink)  
Старый 30.09.2016, 15:32
Интересующийся
Отправить личное сообщение для lucky89 Посмотреть профиль Найти все сообщения от lucky89
 
Регистрация: 27.10.2014
Сообщений: 16

Сообщение от Опан Посмотреть сообщение
заливаю данными массив типа blob, его можно использовать, как медиаисточник для элемента аудио.
Можешь в двух словах рассказать, как звук в blob превратить? Или показать, как будет звучать в твоем исполнении например эта нота: http://printmusic.ru/game/midi/66.mp3 ?
---
Забыл уточнить, это ты чисто программно делаешь или реальный инструмент синтезатор используешь?
Ответить с цитированием
  #10 (permalink)  
Старый 30.09.2016, 22:03
Аватар для Опан
Кандидат Javascript-наук
Отправить личное сообщение для Опан Посмотреть профиль Найти все сообщения от Опан
 
Регистрация: 15.03.2013
Сообщений: 100

Допустим, ты загнал звук пианино из МП3-файла в ArrayBuffer() и декодировал данные, как предложил Aetae. Потом нужно создать объект DataView() (это такой массив, в который можно записывать разнотипную информацию) и отформатировать его содержимое, как в файле формата WAV и в качестве аудиоданных загнать содержимое ArrayBuffer(). Получится то же файл в формате WAV, только в оперативке:
var buffer = new ArrayBuffer();
// тут загоняем аудиоданные
var view = new DataView(buffer);
// тут загоняем всё, что нужно
var audioBlob = new Blob([view], { type: 'audio/wav' });
var url = URL.createObjectURL(audioBlob);
var audio= new Audio(url);
audio.play();

Примерно так (хотя я чуть было не запутался)
Я всё сделал чисто программно, и для заполнения ArrayBuffer использовал математический алгоритм, а не внешний источник (файл). Если интересует сам алгоритм, могу кратко описать в личке.

Последний раз редактировалось Опан, 01.10.2016 в 11:29.
Ответить с цитированием
Ответ


Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как в XML файл вставить другой XML файл ? MSDeveloper (X)HTML/CSS 1 02.09.2014 22:02
Как скачать файл через JS? Dimaz Events/DOM/Window 9 20.07.2014 22:20
Как вы относитесь к наркоманам? Maxmaxmaximus7 Оффтопик 7 05.02.2014 13:29
Как загрузить JavaScript после создание DOM? Jeremen Общие вопросы Javascript 6 24.08.2012 21:54
JavaScript как файл закодировать base64? Трактор AJAX и COMET 3 10.06.2008 13:22