Как да вмъкнете аудио запис в html. Вмъкване на аудио и видео

Мисля, че е време да получите отговор на въпроса как да вмъкнете Flash филми, видео и аудио файлове в HTML документ.
Ще ви покажа няколко начина за вмъкване на видеоклип или аудио файл.

Метод 1.

Видео и аудио файлове могат да бъдат вмъкнати в HTML документ с помощта на етикета.

Не е необходим затварящ етикет.

Възможно е, когато разгледате примера, браузърът ви да изисква свързване със специален плъгин:

Външният вид на плейъра зависи от свързаните атрибути на плъгина и етикета.

Ето например Google Chrome:

Или в Internet Explorer:

EMBED атрибути

height - височина на играча (в пиксели). Пример:

Swf" height="100">

width - ширина на плейъра (в пиксели). Пример:

Swf" width="200">

src - адрес на флаш филм, видео или аудио файл. Пример:

тип - определя типа MIME (спецификация за форматиране на съобщения и кодиране на информация за предаване през интернет) на съдържанието на елемента.

pluginspage - адресът на интернет страницата, от която можете да изтеглите и инсталирате приставката за браузъра.

autostart - ако параметърът е "0", това означава, че след зареждане на уеб страницата, плейърът ще бъде спрян. Ако посочите параметъра „1“, тогава след зареждане на уеб страницата плейърът ще се възпроизведе автоматично (работи в браузъра IE). Пример:

заглавие - показва подсказка, когато задържите курсора на мишката над аудио или видео плейър. (Работи в IE браузър).

Пример:

Вграждане на TAG

Резултат в Google Chrome:

Или можете да го направите по следния начин:

Вграждане на TAG

Резултат в Google Chrome:

Метод 2.

Изображения, аудио, видео, Java приложения, ActiveX, PDF и Flash могат да бъдат вмъкнати в HTML документ с помощта на тага.

Затварящият етикет е задължителен.

Атрибути на ОБЕКТ

данни – указва пътя до обектния файл;
type – тип обект (по избор). Например:

type="application/x-shockwave-flash" или type="image/png" и т.н.;

ширина – ширина;
височина – височина

Можете също да пишете текст между отварящите тагове. Написаният текст ще се покаже, ако браузърът не поддържа обектния елемент.

Пример:

Таг OBJECT Вашият браузър не поддържа таг обект

Резултатът от този пример в прозорец на браузър, ако не поддържа тага OBJECT:

Метод 3.

Можете също да вмъкнете аудио в уеб страница, като използвате етикета:

Атрибути на AUDIO етикет

автоматично пускане - аудиото се възпроизвежда автоматично веднага след зареждане на уеб страницата;

управление - панел за управление на аудио плейъра;

височина - височина на аудио плейъра;

цикъл - повторете възпроизвеждането на звука от началото след края му;

src - път към аудио файла

Пример:

ТАГНЕТЕ АУДИО

Резултат:

Можете също да вмъкнете видеоклип в уеб страница, като използвате следния маркер:

Атрибути на таговете VIDEO

autoplay - видеото се възпроизвежда автоматично веднага след зареждане на уеб страницата;
контроли - контролен панел за видеоплейъра;
височина - височина на видеоплейъра;
width - ширина на видеоплейъра;
цикъл - повторете възпроизвеждането на видеото отначало след края му;
src - път до видео файла;
плакат - изображение адрес. Картината ще се показва на потребителя, докато видеото не е налично или не се възпроизвежда.

Как да добавя музика към видеоклип? Използвайте Movavi Video Editor и тези прости инструкции.

Инсталирайте Movavi Video Editor

Изтеглете видеоредактора на руски от нашия уебсайт. След като изтеглянето приключи, стартирайте инсталационния файл на програмата и следвайте инструкциите за инсталиране.

Добавете видео и аудио към програмата

Стартирайте нашата програма за добавяне на музика към видео и изберете Нов проект. Щракнете върху бутона Добавяне на файлове и изберете видеоклипа, към който искате да добавите аудио запис, и аудио файла, който ще се използва като саундтрак. Файловете, които качвате, автоматично ще бъдат добавени към съответните песни в таблицата за редактиране: видео - към видеозаписа, аудио - към аудиозаписа.

Регулирайте продължителността на звука

Когато комбинирате музика и видео, може да срещнете, че добавените видео и аудио файлове имат различна продължителност. Тук има два възможни варианта.

• Аудио файлът е по-дълъг от видеото. Кликнете върху аудиото, преместете плъзгача до края на видео файла на времевата линия и щракнете върху иконата на ножици. След това щракнете върху нежелания звуков фрагмент и натиснете Delete на клавиатурата, за да изтриете фрагмента.
• Видеото е по-дълго от музиката. Добавете няколко копия на избрания аудио файл към аудиозаписа (щракнете с десния бутон върху файла и изберете Копиране и след това Поставяне). Отрежете излишното.

Не забравяйте, че в Movavi Video Editor можете да вмъкнете няколко аудиозаписа във видеоклип наведнъж. Например, една песен може да се използва за фонова музика, а друга за специални звукови ефекти.

Запазете резултата

Добавянето на звук към видео се оказа доста просто. Сега всичко, което остава, е да запишете всичко в един видео файл. Щракнете върху бутона Запазване и изберете една от опциите за експортиране от разделите в лявата част на прозореца. Програмата ще предложи да запазите видеоклипа в папката Movavi Library. Можете да промените папката, ако желаете. Посочете видео формата или модела на вашето мобилно устройство и щракнете върху бутона Старт. Когато процесът на запазване приключи, ще намерите готовия видео файл в избраната папка. Вече знаете как да добавите звук към видео!

Този въпрос възниква много често, затова реших да му посветя отделна статия в уроците. Тъй като HTML няма универсална технология за възпроизвеждане на аудио за всички браузъри, за да разрешите този проблем, предлагам да изтеглите файла на аудио плейъра, както се прави на повечето сайтове. Ние правим всичко стъпка по стъпка:

1. На хостинга, където се намира вашият сайт, в главната директория (папката, където е индексният файл), създайте аудио папка. В бъдеще ще поставите всички аудио файлове в него.

3. Сега изберете файловете, от които се нуждаете, за предпочитане в mp3 формат. Създайте аудио папка в корена на сайта и ги качете.

4. Остава само да поставите кода за свързване на плейъра. Подходящ е за всеки сайт, просто трябва да посочите пътя до файла на плейъра и аудио файла, като замените съответно думите your_domain и audio_file name:

И всичко е готово! Можете също така да разгледате работния пример.

Как да инсталирате фонова музика в html Използвайки възможностите на HTML и браузъра, можете също да вмъкнете фонова музика в страницата. Ще ви е необходим аудио файл в желания формат: WAV, AU, MIDI или MP3. Можете да използвате всеки файл с посоченото разширение като пример.

Първият начин е етикетът за вграждане. Елементът embed се използва за зареждане и показване на обекти (например видео файлове, флаш филми, някои аудио файлове и т.н.), които браузърът първоначално не разбира.

Синтаксисът е доста прост:

Не е необходим затварящ етикет.

Сега нека разгледаме пример за запис с атрибути и по-долу с тяхното декодиране:

Вграждане на атрибути на тагове за възпроизвеждане на аудио в html
ширина - ширина на панела в пиксели (или процент)
височина - височина на панела в пиксели (или процент)
подравняване - позиция на панела спрямо текста, възможните стойности са ляво, дясно, център
скрит - позволява ви да скриете панела, стойности на атрибута: true - панелът е скрит, false - панелът е видим (стойност по подразбиране)
autostart - true - плейърът стартира автоматично, когато страницата се зареди, false - изчаква натискане на бутона за възпроизвеждане
loop - цикъл, true - песента се пуска в кръг, а ако е false - само веднъж

Втори начин. Много стара, но и практична) Добавете мелодията в същата папка (директория), където се намира вашия файл, и в тялото напишете следния код:

В резултат на това след зареждане на страницата ще прозвучи мелодията, която сте посочили в тага bgsound. Сега нека разгледаме по-добре атрибутите на етикета:

src - път до вашия аудио файл
цикъл - колко пъти да се повтори мелодията (ако -1, тогава се повтаря безкрайно)
баланс - стойност на стерео баланс (от -10000 до 10000)
сила на звука - сила на звука на възпроизвеждане на мелодия, където 0 е максимумът, а -10000 е минимумът.

Въпреки това няма да има начин да контролирате плейъра по какъвто и да е начин - всеки път, когато страницата се опреснява, песента ще се възпроизвежда отново.

След като описах метода за вмъкване на фонова музика, искам да ви разубедя от това, тъй като повечето потребители по правило вече слушат музика, когато посещават различни сайтове. Следователно съпътстващата музика може само да го принуди да затвори раздела със сайта.

Вмъкване на аудио и музика в HTML5 - аудио таг
audio - сдвоен таг, който определя фонов звук, музика или друг аудио поток на сайта.

Атрибути на аудио тагове

autoplay - файлът се възпроизвежда веднага след зареждане на страницата (подобно на фоновата музика на bgsound)
контроли - показват контролния панел на плейъра в браузъра
цикъл - възпроизвежда файла отново след края му
preload - аудио файлът ще бъде зареден заедно със зареждането на страницата
src - път към аудио файла (mp3 или ogg)

Примерен код с аудио етикет

Аудио етикет

Аудио в HTML 5

Аудио етикетът не се поддържа от вашия браузър.
Изтегляне на музика.

Поздрави, Приятели! В това видео ще продължим нашия разговор за вмъкване на обекти в HTML документ.

След като скриптът е свързан, трябва да добавим друг скрипт, за да свържем самата обвивка на плейъра и да посочим параметрите на плейъра:

AudioPlayer.setup("файлова папка/player.swf", (ширина: 290, първоначален обем: 100, transparentpagebg: "да", ляво: "000000", лява икона: "FFFFFF" ));

Този скрипт също трябва да бъде включен преди затварящия таг. Струва си да се отбележи, че тук сме посочили ширината, силата на звука, която ще бъде автоматично зададена по време на възпроизвеждане, и други параметри, които можем да променим по наша преценка.

След като скриптовете са свързани, просто трябва да добавим музикална композиция към страницата, така че да е достъпна за слушане. За да направим това, ще използваме маркери на параграфи, вътре в които можем да оставим информация, която ще се покаже, ако играчът не се появи. Нека свържем друг скрипт, указващ идентификатора на играча и пътя до музикалния файл. Ще изглежда нещо подобно:

Музика

Тук също си струва да обърнете внимание на идентификатора, който се използва за показване на играча. Трябва да се отбележи, че ако искаме да добавим повече от една композиция към страница, трябва да регистрираме нов идентификатор за всеки файл. Например, за да добавим друг файл, ще променим малко идентификатора, нещо подобно:

Музика

AudioPlayer.embed("audioplayer_2", (soundFile: "път към папка с музикален файл/име на файл.mp3"));

Е, това е общо взето всичко. Сега знаем как да добавим аудио към HTML документ. Разбира се, има и други начини. Но мисля, че в нашия случай тази опция е напълно достатъчна.

Видео урок: Как да вмъкна аудио в HTML документ?

HTML директорията и други материали могат и трябва да бъдат изтеглени!

muzicons.com - не изтегля файлове от компютър, вмъкването на аудио чрез директни връзки към файла или чрез вградената търсачка изглежда така:

www.jetune.ru - работи напълно само за руски потребители. За да качите песен, трябва да намерите на уебсайта (без регистрация) или да качите своя изпълнител (с регистрация), да щракнете върху конкретна песен и да получите кода на плейъра:

prostopleer.com - изтеглете или потърсете музика в сайта и вземете кода на плейъра: Някои услуги за хостинг на файлове имат аудио плейъри за mp3 файлове

Типични представители на мрежовата фауна:

divshare.com Регистрирайте се. Кликнете върху „Качване на нов файл“, качете песента. Кликнете върху „табло за управление“ (по-горе) и файлът ще се появи. Щракнете с десния бутон върху него, изберете „споделяне“, копирайте „Вграждане на плейлист“ и поставете:

box.net след изтегляне на файла (като щракнете върху споделено) ще покаже връзка към страница за слушане и изтегляне на файл като:
www.box.net/shared/zf1uk007vy

2. Да се ​​научим да „хващаме риба“

След като разберете принципа, можете да забравите за такива услуги, които често са затворени, изтриват файлове, променят условия и т.н.
Кодът за вмъкване на музика в блог се състои от два основни компонента - флаш плейър (*.swf файл във формата http://../player.swf) и аудио файл (във формата http://.. /song.mp3) - останалото е HTML, тоест букви.
Изглежда нещо подобно:




Качих флаш плеъра тук и получих:
http://site/wp-content/uploads/2009/06/webplayer.swf
след това зареди песента:
http://site/wp-content/uploads/2009/06/08-caravan.mp3
Поставих тези връзки в кода по-горе:

Пълен код за възмущението: