Записка_к_курсачу

Любой пользователь может создавать и делиться шаблонами формул для генерации звука;

Любой пользователь может в произвольном порядке использовать различные инструменты, предоставленные приложением для анализирования и редактирования звука;

При добавлении нового аудио файл должен соответствовать одному из cледующих mime-типов :

audio/basic: mulaw аудио, 8 кГц, 1 канал (RFC 2046);

audio/L24: 24bit Linear PCM аудио, 8-48 кГц, 1-N каналов (RFC

3190);

audio/mp4: MP4;

audio/mpeg: MP3 или др. MPEG (RFC 3003);

audio/ogg: Ogg Vorbis, Speex, Flac или др. аудио (RFC 5334);

audio/vorbis: Vorbis (RFC 5215);

audio/x-ms-wma: Windows Media Audio;

audio/x-ms-wax: Windows Media Audio;

audio/vnd.rn-realaudio: RealAudio;

audio/vnd.wave: WAV(RFC 2361);

audio/webm: WebM.

11

3 РЕАЛИЗАЦИЯ ПРОГРАММНОГО СРЕДСТВА

3.1 Используемые Web audio api функции

Данное программное обеспечение написано на «чистом» javascript с использованием фреймворка ruby on rails как бэк-энда.

Web audio api еще не получил широкого распространения, но предоставляемые им возможности позволяют предположить, что именно эта технология в скором времени станет стандартом воспроизведения и обработки аудио в всемирной паутине.

Общие сведения о возможностях технологии и полные описания методов и объектов можно найти на сайте консорциума всемирной паутины: https://dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.html.

Краткий список функций для обработки и воспроизведения аудио и их краткое описание находится в таблице 3.1.

Таблица 3.1 - Список web audio API функций для работы с аудио

№	Функция	Кратное описание
1	2	3
1	createBuffer	Создаѐт массив AudioBuffer заданного
		размера. По умолчанию
		инициализирован нулями(тишина)
2	cecodeAudioData	Асинхронно декодирует информацию,
		хранящуюся в ArrayBuffer.
3	createGainNode	Создаѐт gainNode, отвечающий за
		уровень громкости
4	createAnalyser	Создаѐт analyserNode, позволяющий
		получать различную информацию о
		аудио.
5	createBufferSource	Создаѐт BufferSource, который может
		служить источником аудио информации
6	сreateDestinationNode	Создаѐт конечный выход для аудио(по
		умолчанию колонки/наушники)
7	connect	Присоединяет один audioNode к другому
8	disconnect	Отсоединяет один audioNode от другого
9	createDelayNode	Создаѐт delayNode, позволяющий
		создавать задержку

12

3.2 Разработка программных модулей

3.2.1 Основные функции программы

loadSound - функция посылает XMLHttp запрос на сервер и получает информацию типа arraybuffer, которая после декодируется в аудио.

setupAudioNodesфункция создаѐт необходимые для воспроизведения аудио элементы, такие как audioNode, анализатор звука, gainNode.

BLoudPlayer.prototype.setupAudioNodes = function() { var self = this;

self.javascriptNode = self.context.createScriptProcessor(2048, 1, 1); self.javascriptNode.connect(self.context.destination);

self.analyser = self.context.createAnalyser(); self.analyser.smoothingTimeConstant = 0.3; self.analyser.fftSize = 512;

self.sourceNode = self.context.createBufferSource(); self.sourceNode.connect(self.analyser); self.analyser.connect(self.javascriptNode);

self.sourceNode.connect(self.context.destination);

}

onaudioprocessсобытие, вызываемое каждый раз, когда произошла обработка звука или примерно каждые 5мс во время воспроизведения аудио, что позволяет считывать информацию об аудио “на лету”

self.javascriptNode.onaudioprocess = function() {

var array = new Uint8Array(self.analyser.frequencyBinCount); self.analyser.getByteFrequencyData(array);

playSoundфункция начинает воспроизведение аудио, хранящегося в буффере финального узла. Принимает 1 аргумент типа arrayBuffer

BLoudPlayer.prototype.playSound = function(buffer) { this.sourceNode.buffer = buffer; this.sourceNode.start(0);

this.state = "playing";

}

При успешной загрузке аудио вызывается декодирование полученной информации:

request.onload = function() { context.decodeAudioData(request.response,

function(buffer) {

if (self.state == "playing"){ self.sourceNode.stop(); self.sourceNode.buffer = null;

}

13

self.setupAudioNodes();

self.playSound(buffer);

},

function(e)

Функция декодирования в свою очередь, в случае успешного выполнения вызывает функцию playSound, которая начинает воспроизведение аудио. При воспроизведении срабатывает событие onaudioprocess, которое в свою очередь анализирует информацию, находящуюся в буффере и передаѐт еѐ функции drawSpectrum:

self.javascriptNode.onaudioprocess = function() {

var array = new Uint8Array(self.analyser.frequencyBinCount); self.analyser.getByteFrequencyData(array);

BLoudPlayer.prototype.drawSpectrum = function(array) { for (var i = 0; i < array.length; i++) {

this.ctx.fillRect(i*5,400-array[i],3,400);

}

}

3.2.2 Прототип bloudPiano

Прототип разработан для осуществления возможности генерации и воспроизведения звука. Особенностью данного прототипа является то, что генерация осуществляется с помощью математических формул.

Метод setVolume - метод позволяет устанавливать нужный уровень громкости.

Функция initPiano - функция, инициализующая прототип и генерирующая звук по умолчанию при загрузке страницы.

function initPiano() { piano = new bloudPiano();

Если по каким-то причинам экземпляр не создался, создаѐтся новый.

window.onkeydown = function(ev)

{

if(piano ==null)

piano = new bloudPiano(); var note = 666;

Далее проверяется, какая клавиша была нажата, и в завимости от этого указывается нота, которую необходимо сыграть.

if ev.keyCode==90 ) if( ev.keyCode==83 ) if( ev.keyCode==88 )

note= 0; // C 0 note= 1; // C#0 note= 2; // D 0

14

if( ev.keyCode==68 ) if( ev.keyCode==67 ) if( ev.keyCode==86 )

note= 3; // D#0 note= 4; // E 0 note= 5; // F 0

Если нажата не та клавиша, ничего не произойдет , в противном случае вызывется метод playNote.

piano.playNote( note );

Метод playNote - метод находит нужную ноту, соединяет все аудио узлы и начинате еѐ воспроизведение

bloudPiano.prototype.playNote = function( note ) { var id = this.mId;

note += this.octave*12;

Инициализируем нужные значения.

var id = this.mId;

note += this.octave*12;

this.mId = (this.mId+1) % 8;

var dbuf = this.buffer[id].getChannelData(0); var num = this.noteLen;

var sbuf = this.noteSamples[note]; for( i=0; i<num; i++ )

{

dbuf[i] = sbuf[i];

}

Создаѐм необходимые узлы и соединяем их.

var gainNode = this.mAudioContext.createGain(); gainNode.connect(this.mAudioContext.destination); gainNode.gain.value = 0.5 * this.volume/100.0;

var node = this.mAudioContext.createBufferSource(); node.buffer = this.buffer[id];

gainNode.gain.value = 0.5 * this.volume/100.0; gainNode.connect(this.mAudioContext.destination); node.connect(gainNode);

И начинаем проигрывание.

node.state = node.noteOn; node.start(0);

15

4 ТЕСТИРОВАНИЕ, ПРОВЕРКА РАБОТОСПОСОБНОСТИ И АНАЛИЗ ПОЛУЧЕННЫХ РЕЗУЛЬТАТОВ

Завершающим этапом разработки программного средства является тестирование, которое представляет собой процесс исследования приложения с целью получения информации о качестве программного продукта.

В процессе проведения приемочных испытаний должны быть протестированы следующие подсистемы:

Подсистема отображения информации;

Подсистема управления содержанием.

Испытания проводятся комплексно - все подсистемы испытываются одновременно на корректность взаимодействия подсистем, влияние подсистем друг на друга. Полученная информация бесценна с точки зрения будущей эффективности разработанного проекта. В результате ее обработки могут вноситься изменения в тексты, дизайн интерфейсов, программные алгоритмы и способы подачи информации.

В таблице 4.1 приведена последовательность действий при тестировании программы.

Таблица 4.1 - Последовательность действий при тестировании программы

№	Модуль	Структура теста	Ожидаемые результаты
1	2	3		4
1	Visit Site	Посетить сайт bloud.com	1.	Отсутствие ошибок
				JS.
			2.	Управляющее
				меню в хедере
			3.	Возможность
				перехода к разделу
				bloudPiano или
				bloudPlayer
2	Visit songs path as	Посетить раздел songs	1.	Приглашение к
	unauthorized	неавторизованным		регистрации
		пользователем.

16

Продолжение таблицы 4.1

1	2		3		4
3	Visit songs path as	Авторизоваться на		1.	Список текущих
	authorized	сайте. Посетить раздел			песен юзера.
		songs.		2.	Кнопка с
					возможностью
					добавления новой
					песни.
4	Add new song	Добавить новую		1.	Уведомление юзера о
		песню			успешной загрузке
		1.	Выбрать файл		файла.
			нужного формата	2.	Отображение его в
		2.	Нажать кнопку		списке файлов.
			upload
5	Visit piano path	Перейти в раздел piano		1.	Сообщение об
					успешном
					завершении
					генерации аудио.
				2.	Звуковое
					сопровождение при
					нажатии на
					клавиатуру.
6	Enter wrong formula	Ввести неверные			Сообщение об
		данные в поле формул			ошибке.

Таким образом, выполненные тесты показали, что разработанное программное средство визуализатор аудио правильно работает во всех основных браузерах, сообщает об ошибках, имеет производительность удовлетворяющую пользователя данной программы.

Данный продукт достаточно хорошо отражает возможности web audio api и даѐт понять, что, возможно, в скором времени эта технология станет стандартом.

17

5 РУКОВОДСТВО ПОЛЬЗОВАТЕЛЯ

На рисунке 5.1 показано главная страница проекта.

Рисунок 5.1 - Главная страница проекта

Для Перехода в нужный раздел достаточно лишь выбрать нужный пункт и нажать на него.

При переходе на страницу пианино пользователь видит достаточно простой интерфейс, показанный на рисунке 5.2.

18

Рисунок 5.2 - Интерфейс страницы piano

На рисунке 5.2 пользователь видит несколько элементов управления: -Набор шаблонов с возможностью выбора из выпадающего

списка(рис 5.3);

Рисунок 5.3 - Набор шаблонов пользователя

19

-Cпектр полученного аудио и поле ввода формул(рис 5.4)

Рисунок 5.4 Спектр звука и поле ввода формул

-Графическое представление пианино(рис 5.5);

Рисунок 5.5 Графическое представление пианино На рисунке 5.6 показана страница с плеером.

20