HTML5 улеснява добавянето на звук и музика към вашите уеб страници с елемента. Всъщност най-трудното нещо е да създадете множество източници, от които се нуждаете, за да се уверите, че вашите звукови файлове се възпроизвеждат на най-разнообразните браузъри.
Ползата от използването на HTML5 е, че можете да вградите звук само с помощта на няколко маркера. След това браузърите възпроизвеждат звука, точно както биха показали изображение, когато използвате елемент IMG .
Как да добавите звук към уеб страница HTML5
Ще ви е необходим HTML редактор , звуков файл (за предпочитане в MP3 формат) и конвертор на звукови файлове.
Първо, имате нужда от звуков файл. Най-добре е файлът да се запише като MP3 ( .mp3 ), тъй като има високо качество на звука и се поддържа от повечето браузъри (Android 2.3+, Chrome 6+, IE 9+, iOS 3+ и Safari 5+).
Преобразувайте файла във формат Vorbis ( .ogg ), за да добавите поддръжка за Firefox 3.6+ и Opera 10.5+. Можете да използвате конвертор, подобен на този на Vorbis.com. Също така можете да конвертирате вашето MP3 във WAV файлов формат ( .wav ), за да получите поддръжка на Firefox и Opera. Препоръчвам да публикувате файла и в трите вида, само за сигурност, но най-много от вас се нуждаете от MP3 и друг тип.
Качете всички аудиофайлове на уеб сървъра си и запишете бележката в директорията, в която сте ги съхранили. Добре е да ги поставите в поддиректория само за аудиофайлове, както повечето дизайнери запазват изображения в директорията с изображения .
Добавете елемента AUDIO към вашия HTML файл, където искате да се показват контролите на звукови файлове. <аудио контроли>
Поставете SOURCE елементи за всеки аудио файл, който качите в елемента AUDIO :
<източник src = "/ audio / sound.wav">
Всеки HTML вътре в елемента AUDIO ще бъде използван като резервен вариант за браузъри, които не поддържат елемента AUDIO . Така че добавете HTML. Най-лесният начин е да добавите HTML, за да можете да изтеглите файла, но можете да използвате и методите за вграждане на HTML 4.01, за да възпроизвеждате звука. Ето един прост резерв:
Вашият браузър не поддържа възпроизвеждане на аудио, изтеглете файла:
Уверете се, че използвате HTML5 doctype (), така че вашият HTML код да бъде потвърден
Прегледайте наличните за елемента атрибути, за да видите какви други опции можете да добавите към елемента си.
Имайте предвид, че ние сме настроили HTML да включва контроли по подразбиране и да има автоматично изключване. Можете, разбира се, да промените това, но не забравяйте, че много хора намират звук, който започва автоматично / че не могат да контролират, за да бъдат досадни в най-добрия случай и често ще напуснат страницата, когато това се случи.