Pliki dźwiękowe można osadzać w HTML5 podobnie do wideo. HTML5 udostępnia własny element audio za pomocą tagu audio.
<audio src="song.mp3"> Twoja przeglądarka nie obsługuje elementu audio. </audio>
Elementowi audio przypisuje się nazwę pliku do odtwarzania za pomocą atrybutu src. Sam plik nie zostanie odtworzony; do tego potrzebne są elementy sterujące.
Aby dodać elementy sterowania, przypisz elementowi audio atrybut controls.
<audio src="song.mp3" controls> Twoja przeglądarka nie obsługuje elementu audio. </audio>
W przeglądarce powinno to wyglądać następująco:
Brak atrybutu controls spowoduje, że element osadzony za pomocą tagu audio nie będzie widoczny. Rozsądne jest pominięcie atrybutu, jeśli chcesz dodać własne elementy sterujące za pomocą JavaScript.
<audio controls>
<source src="song.mp3">
<source src="song.ogg">
</audio>
Atrybutom src zostaną przypisane odpowiednie pliki, które występują w różnych formatach. Oprócz atrybutu controls istnieją inne atrybuty dla elementu audio, np. autoplay.
<audio controls autoplay>
<source src="song.mp3">
<source src="song.ogg">
</audio>
Jeśli atrybut jest ustawiony, odtwarzanie pliku dźwiękowego rozpocznie się automatycznie po załadowaniu. Ten atrybut zazwyczaj się nie ustawia, ponieważ powinno się pozostawić decyzję kiedy odtworzyć plik dźwiękowy odwiedzającym stronę.
Również interesującym atrybutem jest loop. Atrybut ten powoduje, że plik jest odtwarzany w pętli.
Tak jak przy osadzaniu wideo, dla plików dźwiękowych również istnieją dwa atrybuty: type oraz media. Możecie tutaj określić odpowiednie typy MIME i kodeki. W specyfikacji HTML5 wymienione są następujące typowe wartości dla atrybutu typ:
• typ='audio/ogg; codecs=vorbis'
• typ='audio/ogg; codecs=speex'
• typ='audio/ogg; codecs=flac'
Zwróćcie uwagę, że oba atrybuty można używać wyłącznie w tagu source, a nie w tagu audio.
Osadzenie Flasha i innych
Filmy Flash można osadzać w starszych wersjach HTML za pomocą kombinacji tagów embed i object. Przykładowa, niezbyt estetyczna, składnia wyglądałaby na przykład tak:
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" width="800" height="600"> <param name=movie value="intro.swf"> <param name=quality value=high> <embed src="intro.swf" quality=high pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="800" height="600"> </embed> </object>
To jest klasyczny sposób za pomocą tagów object i embed, które istnieją od dawna w HTML. 
Jednak "klasyczny" tutaj nie oznacza, że ten sposób został zatwierdzony przez W3C w przeszłości. W HTML 4 preferowany był tag object, który był poprawnie interpretowany przez Internet Explorer. Inaczej było z Netscape Navigator. Ten używał tagu embed. Różna interpretacja sprawiła, że konieczne było użycie kombinacji tagów object i embed.
Do dodania aktywnej zawartości w HTML5 oficjalnie służą teraz tagi object oraz embed.embed to kontener przeznaczony do wyświetlania treści nie-HTMLowych, które nie są obsługiwane przez inne elementy, takie jak img, video, audio, itp. Do wyświetlenia osadzonych treści zwykle wymagane są wtyczki przeglądarki.
Za pomocą embed możesz teraz na przykład zintegrować filmy Flash zgodnie ze standardem. Oto przykład, jak może to wyglądać:
<embed
src="http://www.youtube.com/v/v1PgiBpTtao?fs=1&hl=de_DE"
type="application/x-shockwave-flash"
width="384"
height="313"
allowscriptaccess="always"
allowfullscreen="true"
/>
Elementowi embed można przypisać różne atrybuty. Najważniejszy z nich to oczywiście atrybut src. Dzięki niemu ostatecznie określa się plik do włączenia. Atrybut type określa typ MIME.
W przypadku Flash jest to application/x-shockwave-flash. Jeśli chcesz zaimportować plik LaTeX, wpisz application/x-latex. Szerokość i wysokość zaimportowanego pliku regulowane są za pomocą width i height.
Istnieją również inne atrybuty, które nie są oficjalnie częścią HTML5. Pozwalają one jednak na sterowanie używanym dodatkiem. W poprzednim przykładzie za pomocą atrybutów "Flash" allowscriptaccess i allowfullscreen określono, że można uzyskać dostęp do skryptu i tryb pełnoekranowy. Istnieje również atrybut quality, który pozwala określić jakość filmu Flash.
<embed
src="flash.swf"
width="600" height="300"
type="application/x-shockwave-flash"
quality="high"
/>Element object
Element object służy podobnie jak embed jako kontener na treści. W przeciwieństwie do embed, element object zna jednak trzy różne modele treści. Jeśli przeglądarka rozpozna, że jest to grafika bezpośrednio wyświetlana, zachowa się tak, jakby to było element img. Jeśli odwołuje się do obiektu jako treści online, zostanie ona wyświetlona wewnątrz ramek iFrame (więcej na temat ramek iFrame pojawia się później w tej serii). Dla innych treści element object zachowuje się jak embed.
Poniższy przykład pokazuje włączenie filmu Flash za pomocą elementu object.
<object
type="application/x-shockwave-flash"
data="http://www.youtube.com/v/BzYBY_9rnuA?version=3&hl=de_DE&rel=0"
width="400"
height="300">
<param name="allowscriptaccess" value="always" />
<param name="allowfullscreen" value="true" />
<p>
W twojej przeglądarce nie ma wtyczki Flash.
</p>
</object>Ostatecznie pojawia się oczywiście pytanie, czy należy używać elementu object czy embed. Na pierwszy rzut oka te dwa elementy wydają się niemal identyczne. W rzeczywistości element object może zrobić wszystko, co może element embed.
Do włączania treści - poza obrazami - zazwyczaj należy używać elementu object. Element ten umożliwia podanie alternatywnych treści wyświetlanych, gdy zaimportowany element nie może zostać załadowany.
