ОТКРЫТЫЙ КОД ВЫПОЛНЕННОГО ЗАДАНИЯ

Министерство образования и науки Российской Федерации

Федеральное государственное бюджетное образовательное

Учреждение высшего образования

«МГУТУ им.К.Г.Разумовского (Первый казачий университет)»

Университетский колледж информационных технологий

ПРАКТИЧЕСКОЕ ЗАДАНИЕ

специальность 09.02.05 «Прикладная информатика (по отраслям)»

Группа	ПИ-306
Студент	Потапов А.И.
Преподаватель	Кузьменко С.Ю.

Москва

2018

ТЕОРИТИЧЕСКАЯ ЧАСТЬ

Audio

Благодаря тегу <audio>, появившемуся в HTML5, можно очень просто добавлять звук на сайт. В javascript работать со звуком позволяет соответствующий класс Audio, а проверить поддержку формата звукового файла в браузере - метод canPlayType.

Если в HTML есть тег <audio>, доступ к соответствующему объекту Audio можно получить через имя тега

var audio = document.getElementsByTagName('audio')[index];

или через id

var audio = document.getElementById('my-audio-id');

Объект Audio также можно создать в js.

Создание объекта Audio в javascript

var aud = new Audio();

aud.src = 'sound.ogg';

//или

var aud = new Audio('sound.ogg');

или

$('audio').attr('src', 'audio_file.mp3')

*** Используется один из поддерживаемых форматов (mp3, wav, ogg)

Воспроизведение звука и пауза:

myaudio.play(); //воспроизведение звука

myaudio.pause(); // пауза

// после паузы воспроизведение продолжится с места остановки

myaudio.play();

Как остановить воспроизведение audio

Команды stop нет, и чтобы остановить воспроизведение звукового файла, нужно два действия - пауза и задание нулевого значения для свойства currentTime- текущее время:

// Функция stop для Audio:

HTMLAudioElement.prototype.stop = function()

{

this.pause();

this.currentTime = 0.0;

}

...

myaudio.stop(); // использование

События audio

loadeddata - данные загружены

Используем событие loadeddata , чтобы начать воспроизведение большого звукового файла после окончания загрузки:

var loaded = false;

var aud = new Audio();

aud.addEventListener('loadeddata', function() {

loaded = true;

aud.play();

}, false);

aud.src = 'background.ogg';

Обработчик события окончания загрузки записан раньше, т.к. он должен быть доступен во время загрузки файла, которая начинается сразу после задания src.

error - обработка ошибки загрузки

aud.addEventListener('error' , function() {

alert('ошибка загрузки файла');

}, false);

aud.src = 'nofile.ogg';

onended - окончание воспроизведения

Длительность звукового файла

var audio = document.createElement('audio');

audio.src = 'mus3.mp3';

var time = audio.duration; // time=NaN

Свойство duration может быть недоступно, если не завершена загрузка метаданных, правильно:

audio.addEventListener('loadedmetadata', function() {

time = audio.duration;

});

Изменение свойств audio

Используем свойство muted - кнопки включения и выключения звука на странице:

<html>

<body>

</body>

</html>

Хотелось бы выключать фоновый звук, когда посетитель сайта переключается на другое окно или вкладку браузера. Важно, что выражение muted=true сработает, если будет выполняться после завершения загрузки звукового файла, т.е. его следует поместить в обработчик события loadeddata:

var loaded = false;

var aud = new Audio();

aud.addEventListener('loadeddata', function() {

aud.muted = true;

}, false);

aud.src = 'background.ogg';

aud.play();

Поддержка элемента Audio и форматов звуковых файлов

Для проверки поддержки форматов звуковых файлов браузером используется метод canPlayType с параметром текстовым значением MIME-типа.

audio.canPlayType('audio/ogg');

Можно явно указать кодек:

audio.canPlayType('audio/ogg; codecs="vorbis"');

canPlayType возвращает одно из 3 значений:

probably - наверное

maybe - может быть

"" (пустая строка) - формат не поддерживается

Пример проверки поддержки формата mp3

Можете проверить, Opera не поддерживает формата mp3

var audio = new Audio();

var canPlayMmp3 = !!audio.canPlayType && audio.canPlayType('audio/mp3') != "";

if(!canPlayMmp3) {

document.write('mp3 не поддерживается!<br />');

}

*** "!!" преобразует объект строки в логический тип

Пример проверки поддержки audio и форматов файлов

function check_audio() {

var elem = document.createElement('audio'), bool = false;

try {

if ( bool = !!elem.canPlayType ) {

bool = new Boolean(bool);

bool.ogg = elem.canPlayType('audio/ogg; codecs="vorbis"').replace(/^no$/,'');

bool.mp3 = elem.canPlayType('audio/mpeg;').replace(/^no$/,'');

bool.wav = elem.canPlayType('audio/wav; codecs="1"').replace(/^no$/,'');

bool.m4a = (elem.canPlayType('audio/x-m4a;') || elem.canPlayType('audio/aac;')).replace(/^no$/,'');

}

catch(e) {

}

return bool;

}

var b = check_audio();

if(!b) {

document.write('Audio не поддерживается');

}

else {

var formats = ['ogg', 'mp3', 'wav', 'm4a'];

for(var i = 0; i < formats.length; i++) {

document.write(formats[i] + ' - ' + b[formats[i]] + '<br />');

}

</script>

Если функция check_audio возвращает false, браузер не поддерживает элемент audio. Если элемент audio поддерживается, проверяется возможность использования форматов файлов ogg, mpeg, wav и m4a.

ПРАКТИЧЕСКАЯ ЧАСТЬ

HTML код

<!DOCTYPE html>

<html>

<head>

<title>Hello</title>

</head>

<body>

</div>

</body>

</html>

CSS код

#bttngo{

position: fixed;

top: 5px;

left: 10px;

z-index: 100;

}

#thefile {

position: fixed;

top: 30px;

left: 10px;

z-index: 100;

}

#canvas {

position: fixed;

left: 0;

top: 0;

width: 100%;

height: 100%;

}

audio {

position: fixed;

left: 10px;

bottom: 10px;

width: calc(100% - 20px);

}

JS код

window.onload = function() {

var file = document.getElementById("thefile");

var audio = document.getElementById("audio");

var bttn = document.getElementById("bttngo");

bttn.onclick = function() {

var files = file.files;

audio.src = URL.createObjectURL(files[0]);

audio.load();

audio.play();

var context = new AudioContext();

var src = context.createMediaElementSource(audio);

var analyser = context.createAnalyser();

var canvas = document.getElementById("canvas");

canvas.width = window.innerWidth;

canvas.height = window.innerHeight;

var ctx = canvas.getContext("2d");

src.connect(analyser);

analyser.connect(context.destination);

analyser.fftSize = 256;

var bufferLength = analyser.frequencyBinCount;

console.log(bufferLength);

var dataArray = new Uint8Array(bufferLength);

var WIDTH = canvas.width;

var HEIGHT = canvas.height;

var barWidth = (WIDTH / bufferLength) * 2.5;

var barHeight;

var x = 0;

function renderFrame() {

requestAnimationFrame(renderFrame);

x = 0;

analyser.getByteFrequencyData(dataArray);

ctx.fillStyle = "#000";

ctx.fillRect(0, 0, WIDTH, HEIGHT);

for (var i = 0; i < bufferLength; i++) {

barHeight = dataArray[i];

var r = barHeight + (25 * (i/bufferLength));

var g = 250 * (i/bufferLength);

var b = 50;

ctx.fillStyle = "rgb(" + r + "," + g + "," + b + ")";

ctx.fillRect(x, HEIGHT - barHeight, barWidth, barHeight);

x += barWidth + 1;

}

audio.play();

renderFrame();

};

ЗАДАНИЕ ДЛЯ ВЫПОЛНЕНИЯ

Добавить кнопку выключения звука.

ОТКРЫТЫЙ КОД ВЫПОЛНЕННОГО ЗАДАНИЯ

HTML код

<!DOCTYPE html>

<html>

<head>

<title>Hello</title>

</head>

<body>

</div>

</body>

</html>

CSS код

#mute{

position: fixed;

top: 5px;

left: 10px;

z-index: 100;

}

#bttngo{

position: fixed;

top: 30px;

left: 10px;

z-index: 100;

}

#thefile {

position: fixed;

top: 55px;

left: 10px;

z-index: 100;

}

#canvas {

position: fixed;

left: 0;

top: 0;

width: 100%;

height: 100%;

}

audio {

position: fixed;

left: 10px;

bottom: 10px;

width: calc(100% - 20px);

}

JS код

window.onload = function() {

var mute = 0;

var file = document.getElementById("thefile");

var audio = document.getElementById("audio");

var bttn = document.getElementById("bttngo");

var mut = document.getElementById("mute");

bttn.onclick = function() {

var files = file.files;

audio.src = URL.createObjectURL(files[0]);

audio.load();

audio.play();

var context = new AudioContext();

var src = context.createMediaElementSource(audio);

var analyser = context.createAnalyser();

var canvas = document.getElementById("canvas");

canvas.width = window.innerWidth;

canvas.height = window.innerHeight;

var ctx = canvas.getContext("2d");

src.connect(analyser);

analyser.connect(context.destination);

analyser.fftSize = 256;

var bufferLength = analyser.frequencyBinCount;

console.log(bufferLength);

var dataArray = new Uint8Array(bufferLength);

var WIDTH = canvas.width;

var HEIGHT = canvas.height;

var barWidth = (WIDTH / bufferLength) * 2.5;

var barHeight;

var x = 0;

mut.onclick = function() {

if (mute == 0) {

audio.volume=0;

mut.value = "unmute";

mute = 1;

}else if (mute == 1) {

audio.volume=1;

mut.value = "mute";

mute = 0;

}

function renderFrame() {

requestAnimationFrame(renderFrame);

x = 0;

analyser.getByteFrequencyData(dataArray);

ctx.fillStyle = "#000";

ctx.fillRect(0, 0, WIDTH, HEIGHT);

for (var i = 0; i < bufferLength; i++) {

barHeight = dataArray[i];

var r = barHeight + (25 * (i/bufferLength));

var g = 250 * (i/bufferLength);

var b = 50;

ctx.fillStyle = "rgb(" + r + "," + g + "," + b + ")";

ctx.fillRect(x, HEIGHT - barHeight, barWidth, barHeight);

x += barWidth + 1;

}

audio.play();

renderFrame();

};

Дата добавления: 2019-02-22; просмотров: 146; Мы поможем в написании вашей работы!

Поделиться с друзьями:

Мы поможем в написании ваших работ!