ããã¯ã2009幎ã®èè ïŒèè ãMark BoasïŒã®èšäºã ãã©ãŠã¶ã®ãã€ãã£ããªãŒãã£ãª ã ïŒè±èªãããã³2010幎10æã«è£è¶³-çŽTranslãïŒã®ç¶ãã§ãHTML5ã®ãªãŒãã£ãªã®åºæ¬ã«ã€ããŠèª¬æããŠããŸãã <audio>ã¿ã°ãšããã«é¢é£ä»ããããAPIã®åäœãç¥ãããå Žåã¯ãæåã«èªãå¿ èŠããããŸãã ïŒ ãã·ã¢èªã®ç¿»èš³ããããŸããã 2009幎以éã®ããŒãžã§ã³ã§ããïŒ
ããŠã2.5幎åŸãç©äºãã©ã®ããã«é²ãã§ããããèŠãæãæ¥ãŸããã å€ãã®é«åºŠãªãªãŒãã£ãªAPIãç©æ¥µçã«éçºãããŠããŸãããç§ãã¡ã«ã€ã³ã¹ãã¬ãŒã·ã§ã³ãäžãããã€ãã£ããã©ãŠã¶ããŒã¹ã®ãµãŠã³ããµããŒãã¯æ¹åãããŠããŸãã<audio>ã¿ã°ã®é åçãªäžçã«æ»ãæãæ¥ãŸããã
ç¶æ³ãç解ããããã®è¯ãæ¹æ³ã¯ãããã€ãã®äœ¿çšäŸãèŠãããšã§ããããã«ã€ããŠã¯åŸã§èª¬æããŸãã
ã©ããã£ãŠå§ããŸããïŒ æºåã®ããã«ãã¹ã¿ãŒããå¿ èŠãããæŠå¿µãããã€ããããŸãã æåã«MIMEã¿ã€ããç解ããŸãããã
â MIMEã¿ã€ã
âãµãŒããŒéšå
ã€ã³ã¿ãŒãããã¡ãã£ã¢ã¿ã€ããšãåŒã°ããŸã-ããã¯ãã·ã¹ãã ã«ã¡ãã£ã¢ã®æäœæ¹æ³ãç¥ããã1ã€ã®æ¹æ³ã§ãã
ãŸããMIMEã¿ã€ããé©åã«ãµããŒãããããã«ãµãŒããŒãæ§æããå¿ èŠããããŸãã Apacheã®å Žåãããã¯.htaccessã«è¡ãããããšãæå³ããŸãã
# AddType TYPE/SUBTYPE EXTENSION AddType audio/mpeg mp3 AddType audio/mp4 m4a AddType audio/ogg ogg AddType audio/ogg oga AddType audio/webm webma AddType audio/wav wav
ãã³ã ïŒ ãµãŒããŒäžã®ã¡ãã£ã¢ãã¡ã€ã«ãgzipå§çž®ããªãã§ãã ããã ã»ãšãã©ã®åœ¢åŒã¯æ¢ã«å§çž®ãããŠãããæ®ãã®éšåã¯ããçšåºŠãµããŒããããŠããŸãã ããã«ããã©ãã·ã¥ã䜿çšããããã¯ã¢ãããœãªã¥ãŒã·ã§ã³ã§ã¯ãã¡ãã£ã¢ããŒã¿ã®å§çž®ããµããŒãããŠããŸããã |
âã¯ã©ã€ã¢ã³ãéšå
ããŒã¿ãœãŒã¹ãã³ãŒããŸãã¯ããŒã¯ã¢ããã§èšè¿°ããå ŽåãMIMEã¿ã€ããæå®ããŠããã©ãŠã¶ãŒãããŒã¿ãæ£ããå€å¥ã§ããããã«ããããšãã§ããŸãã
HTML5ãªãŒãã£ãªãèšè¿°ããæãä¿¡é Œã§ããæ¹æ³ã¯ã次ã®ãããªãã®ã§ãã
<audio> <source src="elvis.mp3" type='audio/mpeg; codecs="mp3"'> <source src="elvis.oga" type='audio/ogg; codecs="vorbis"'> <!-- - --> </audio>
ããã«ããã䜿çšãããã¿ã°ãšããŒã¿ãœãŒã¹ãå®çŸ©ãããŸãã ãã©ãŠã¶ã¯1ã€ã ããéžæããŸã-2ã€ä»¥äžã¯å€±ãããŸããã åãã³ãŒãã«ããã¯ã¢ããåŠçãªãã·ã§ã³ãé 眮ãããŸãã
ããŒã¿å±æ§ãšãšãã«ã typeå±æ§ã¯srcå±æ§ã§æå®ãããŸãã ããã¯ãªãã·ã§ã³ã§ããããã©ãŠã¶ãããŠã³ããŒãããåã«é ä¿¡ããããã¡ã€ã«ã®MIMEã¿ã€ããšã³ãŒããã¯ãèŠã€ããã®ã«åœ¹ç«ã¡ãŸãã ããã§ãªãå Žåããã©ãŠã¶ã¯å¯èœãªæ¹æ³ã§ãã¡ã€ã«ããã¿ã€ããèŠã€ããããšããŸãã
泚 ïŒ å±æ§ã§ã³ãŒããã¯ã®ååãã¹ãããã§ããŸãããä¿¡é Œæ§ãšå¹çã®ããã«ãå¯èœãªéãæ倧ã®æ å ±ãæäŸããŠãã©ãŠã¶ãŒãæ¯æŽããããšããå§ãããŸãã |
âé³å£°ã®çš®é¡ãäºåã«ææ¡ããŠãããšã .canPlayTypeã«åœ¹ç«ã¡ãŸã ïŒããããïŒ
幞ããªããšã«ãAPIã¯ç¹å®ã®ãã¡ã€ã«åœ¢åŒããã©ãŠã¶ã§ãµããŒããããŠãããã©ããã瀺ããŸãã ããããæåã«ã<audio>ã¿ã°ãå¶åŸ¡ããæ¹æ³ã®ç°¡åãªèª¬æã
Audioãªããžã§ã¯ããHTMLã§èšè¿°ãããŠããå Žåããªããžã§ã¯ããžã®ã¢ã¯ã»ã¹ã¯DOMãä»ããŠååŸã§ããŸãã
var audio = document.getElementsByTagName('audio')[index];
ãŸãã¯ãidãå®çŸ©ãããŠããå Žåã
var audio = document.getElementById('my-audio-id');
ãŸãã¯ããªããžã§ã¯ãã¯å®å šã«Javascriptã§äœæãããŸãã
var audio = new Audio();
Audioãªããžã§ã¯ããããå Žåãã€ãŸãããã®ã¡ãœãããšããããã£ãžã®ã¢ã¯ã»ã¹ã 圢åŒã®ãµããŒãã確èªããã«ã¯ãcanPlayTypeã¡ãœããããã©ã¡ãŒã¿ãŒïŒMIMEã¿ã€ãã®ããã¹ãå€ïŒãšå ±ã«äœ¿çšããŸãã
audio.canPlayType('audio/ogg');
ã³ãŒããã¯ãæ瀺çã«æå®ããããšãã§ããŸãïŒ
audio.canPlayType('audio/ogg; codecs="vorbis"');
canPlayTypeã¯ã次ã®3ã€ã®å€ã®ãããããè¿ããŸãã
1ïŒ ãããã
2ïŒ å€å ããŸãã¯
3ïŒ ""ïŒç©ºã®æååïŒã
ãããã®å¥åŠãªã¿ã€ããååŸãããã€ã³ãã¯ãã¿ã€ãããšã«å€æããéããã³ãŒããã¯ãååšããç¶æ³ã®äžè¬çãªå¥åŠãããæ¥ãŠããŸãã å®éã«åçããããšããªããšããã©ãŠã¶ã¯ã³ãŒããã¯ã®é©çšå¯èœæ§ã®ã¿ãæšæž¬ã§ããŸãã
ãµããŒãã確èªããããã«ãåèšã§æ¬¡ã®ããšãè¡ããŸãã
var audio = new Audio(); var canPlayOgg = !!audio.canPlayType && audio.canPlayType('audio/ogg; codecs="vorbis"') != "";
ããã§ã¯ãcanPlayTypeããµããŒããããŠããããšã確èªãïŒã!!ãã¯æååãªããžã§ã¯ããããŒã«åã«å€æããã ãã§ãïŒããã©ãŒãããã®canPlayTypeã空ã®æååã§ã¯ãªãããšã確èªããŸãã ïŒæåã®éšåãšã¯äœãšãªãéè«ççã§ãããããããèè ã¯æªå®çŸ©ãè¿ãããšãã§ããããšãèšåããã®ãå¿ããŠããŸãããïŒ-ãããTranslãïŒ
â ãã©ãŠã¶ã§ã®ããŸããŸãªã³ãŒããã¯ã®ãµããŒã
ææ°ã®ãã©ãŠã¶ã§ã³ãŒããã¯ãã©ã®ããã«ãµããŒããããŠããããèŠãŠã¿ãŸãããã
ãã¹ã¯ããããã©ãŠã¶ã³ãŒããã¯ïŒ
ãã¹ã¯ãããç | æ° | ã³ãŒããã¯ã®ãµããŒã |
---|---|---|
ã€ã³ã¿ãŒããããšã¯ã¹ãããŒã©ãŒ | 9.0+ | MP3ãAAC |
ã¯ãã | 6.0+ | Ogg VorbisãMP3ãWAVïŒChrome 9以éïŒ |
Firefox | 3.6+ | Ogg VorbisãWAV |
ãµãã¡ãª | 5.0+ | MP3ãAACãWAV |
ãªãã© | 10.0+ | Ogg VorbisãWAV |
ã¢ãã€ã«ãã©ãŠã¶ | ããŒãžã§ã³ | ã³ãŒããã¯ã®ãµããŒã |
---|---|---|
Opera Mobile | 11.0+ | ããã€ã¹äŸå |
Android | 2.3+ | ããã€ã¹äŸå |
ã¢ãã€ã«ãµãã¡ãª | ïŒiPhoneãiPadãiPod TouchïŒiOS 3.0以é | MP3ãAAC |
ãã©ãã¯ããªãŒ | 6.0+ | MP3ãAAC |
æªããã¥ãŒã¹ã¯ãã³ãŒããã¯ã®ãŠãããŒãµã«ãµããŒãã«ã€ããŠã¯ãŸã åæããªãããããã©ãŠã¶ãŒã§HTML5ãªãŒãã£ãªãå®å šã«ãµããŒãããã«ã¯ããµãŒããŒãMP3ãšOgg Vorbisã®äž¡æ¹ããµããŒãããå¿ èŠãããããšã§ãã
é¢çœã ïŒ Android 2.2ã¯<video>ããµããŒãããŠããŸããã<audio>ã¯ãµããŒãããŠããŸããã ãªãŒãã£ãªãåçããã«ã¯ã<video>ã¿ã°ã䜿çšããå¿ èŠããããŸãã |
âã³ã³ããã圢åŒãããã³ãã¡ã€ã«æ¡åŒµåïŒããã³ãããã®MIMEã¿ã€ãïŒ
äžèšã§ããç¥ãããŠãããªãŒãã£ãªåœ¢åŒã«ã€ããŠè¿°ã¹ãŸããããæè¡çã«ã¯ã³ã³ãã圢åŒã§äœæ¥ããå¿ èŠããããŸãã ïŒã³ã³ããã«ã¯è€æ°ã®åœ¢åŒãå«ãŸããå ŽåããããŸããããšãã°ãMP4ã«ã¯AACããã³AAC +ãå«ãŸããå ŽåããããŸããïŒ
ã³ã³ãã | ãã©ãŒãããïŒsïŒ | ãã¡ã€ã«æ¡åŒµå | MIMEã¿ã€ã | ã³ãŒããã¯æåå |
---|---|---|---|---|
MP3 | MP3 | .mp3 | ãªãŒãã£ãª/ MPEG | mp3 |
Mp4 | AACãAAC + | .mp4ã.m4aã.aac | ãªãŒãã£ãª/ mp4 | mp4a.40.5 |
OGA / OGG | GG vorbis | .ogaã.ogg | ãªãŒãã£ãª/ ogg | ãŽã©ã«ãã¹ |
Wav | PCM | .wav | ãªãŒãã£ãª/ wav | 1 |
â<audio>ãããã䜿çšããããšãæããŠããŸããïŒ
ããŠãç§ãã¡ã¯ã©ãããããããªãŒãã£ãªã¿ã°ãç«ã¡äžããŸãã-ãããŠããã¯åäœããŸãã ä»ã«äœããããã§ããïŒ åãã©ãŠã¶ã§ã¯ãããã©ã«ãã®èšå®ã«ãããèŠçŽ ã®åäœãå°ãç°ãªããŸãã ç§ã¯ããããäžèŠã«å°ãåããããã§ãã ããã«ã¯<audio>èŠçŽ ã®ããã€ãã®ããããã£ããããŸãã
æããã䜿çšãããå±æ§ã®äžéšïŒ
ç©ä»¶ | 説æ | æ»ãå€ |
---|---|---|
currentTime | ãã¬ãŒã€ãŒã®ã«ãŒãœã«äœçœ® | ããã«ïŒç§ïŒ |
æé | ãã¬ã€æé | doubleïŒç§ïŒ; èªã¿åãå°çš |
ãã¥ãŒã | é³ãããã£ãŠããŸã | ããŒã«å€ |
äžæåæ¢ | åçãåæ¢ããŠããŸã | ããŒã«å€ |
ããªã¥ãŒã | é³éã¬ãã« | doubleïŒ0ãã1ïŒ |
var audio = new Audio(); var duration = audio.duration;
æéå€æ°ã¯ããªãŒãã£ãªã¯ãªããã®æé ïŒç§åäœïŒã«èšå®ãããŸãã
â ãããã¡ãªã³ã°ãæ€çŽ¢ãããã³æéç¯å²
ãã®ç¶æ³ã¯æ¹åãããŠããããã©ãŠã¶éçºè ã¯ä»æ§ã®å€§éšåãå®è¡ãå§ããŠããŸãã
APIã¯ãã¡ãã£ã¢ãã¡ã€ã«ã®ã©ã®éšåãé 延ãªãã«åçã®ããã«ãããã¡ãªã³ã°ãŸãã¯ããªããŒããããŠããããç¥ããããšãã«ã ãããã¡ãªã³ã°ãããã·ãŒã¯å¯èœãªå±æ§ãæäŸããŸãã ãããã¯äž¡æ¹ãšãã TimeRangesãªããžã§ã¯ããè¿ããŸããããã¯ãééã®ãªã¹ãïŒéå§çªå·ãšçµäºçªå·ïŒã§ãã
â ãããã¡ãªã³ã°ãããå±æ§
ãã¡ã€ã«ã®å®å šã«ããŒããããã»ã¯ã·ã§ã³ã®ééãè¿ããŸãã å°ããªäŸïŒ
// TimeRanges var buffered = audio.buffered; // TimeRange var bufferedEnd = audio.buffered.end();
â TimeRangesãªããžã§ã¯ã
TimeRangesãªããžã§ã¯ãã«ã¯ããããã¡ãªã³ã°ãããã¡ãã£ã¢äžã®ããŒãã«é¢ããããŒã¿ãã1ã€ãŸãã¯è€æ°ã®-æéç¯å²ã®åœ¢åŒã§å«ãŸããŠããŸãã TimeRangesãªããžã§ã¯ãã¯ã次ã®ããããã£ã§æ§æãããŸãã
ããã«ã¯ãã¡ãã£ã¢ãã¡ã€ã«ã®ãããã¡ãªã³ã°ãããã»ã¯ã·ã§ã³ã®äžéšïŒ1ã€ä»¥äž-ãããã¡ãªã³ã°ãããæ°ïŒã®ããŒã¿ãå«ãŸããããããã£ããããŸãã
é·ã -ééã®æ°
startïŒã€ã³ããã¯ã¹ïŒ -æå®ãããééã®éå§æéã
endïŒindexïŒ -æå®ãããééã®çµäºæé
ïŒåçã®éå§ããã«ãŠã³ãïŒã
ãããã ïŒ JSã®åŸæ¥ã®é¢æ°ã¯ããªç§ã䜿çšããŸãããããã©ã«ãã§ã¯ãJS Audio APIã®æéãã£ã¡ã³ã·ã§ã³ã¯ç§ã§ãã |
------------------------------------------------------ // |=============| |===========| | ------------------------------------------------------ 0 5 15 19 21
ãããã£ãŠããã®äŸã§ã¯ïŒ
audio.buffered.length //returns 2 audio.buffered.start(0) //returns 0 audio.buffered.end(0) //returns 5 audio.buffered.start(1) //returns 15 audio.buffered.end(1) //returns 19 audio.buffered.end() //returns 19
ã©ã®ãããªå Žåã«ãè€æ°ã®ãããã¡ãªã³ã°ãããééããããŸããïŒ ãŠãŒã¶ãŒã¯ããã¬ãŒã€ãŒãŠãããã®ã¹ã±ãŒã«ã®ãããã¡ãªã³ã°ãããŠããªãã»ã¯ã·ã§ã³ãã¯ãªãã¯ããŸãã ãªããžã§ã¯ãã¯ã¯ãªãã¯ãã€ã³ãããæ°ãããããã¡ãªã³ã°ãéå§ãã2ã€ã®ãããã¡ãªã³ã°ééãçºçããŸãã
ãã³ã ïŒ ã»ãšãã©ã®ãªãŒãã£ãªãã¬ãŒã€ãŒã§ã¯ãäžé£ã®ãµãŒããŒèŠæ±ãå®äºããããšã«ãããããŒãæã«æ°ãããã¡ã€ã«äœçœ®ã«ç§»åã§ããŸãã Apacheã§ã¯ãããã©ã«ãã§è€æ°ã®ãã¡ã€ã«ã¢ã¯ã»ã¹ãèš±å¯ãããŠããŸãããèšå®ãäžæãªãµãŒããŒã§ã¯ããã確èªããå¿ èŠããããŸãã |
ãã®äŸ¿å©ãªHTML5 Media Event Inspectorã䜿çšããŠããã©ãŠã¶ã®TimeRangesã確èªã§ããŸãã
â ã·ãŒã¯ããã³ã·ãŒã¯å¯èœãªå±æ§
ã¡ãã£ã¢ãã¡ã€ã«ã®ã³ã³ããã¹ãã§ã®æ€çŽ¢ã¯ãã¡ãã£ã¢ãã¡ã€ã«ã®åæ¹ãŸãã¯åŸæ¹ãæ¢ããŠããŸãã ããã¯éåžžãå®å šãªãã¡ã€ã«ãããã¡ãªã³ã°ããŸã å®äºããŠããªãå Žåã«çºçããŸãã ã·ãŒã¯å±æ§ã¯ãã ã·ãŒã¯ ãã€ãã³ããçºçããããšã瀺ãããã«äœ¿çšãããŸãã trueã¯ããã¡ã€ã«ã®äžéšããŸã ã¢ããããŒããããŠããªãããšãæå³ããŸãã
ç¶è¡ããã«ã¯...
å ã®Webãµã€ãhtml5doctor.comã«æ³šæããŠãã ããã
ãã®èšäºã¯Mark Boasã«ãã£ãŠæžãããŸããã ããŒã¯ã¯ãæ°ãããªãŒãã³ãªãŠã§ããã¯ãããžãŒãéçºãæå°ã説æãããã³æšé²ããŠããŸãã ç¹ã«jPlayer Media Frameworkãéçºããå°ããªWebã¹ã¿ãžãªã§ããHappywormã®å ±åèšç«è ã¯ãHTML5ãšJavaScriptã䜿çšããŠãã©ãŠã¶ãŒæ©èœãæ¡åŒµããŸãã äžå¿çãªãžã§ãã©ãªã¹ããšããŠãMarkã¯ã»ãšãã©ã®æéãWebã¡ãã£ã¢ãšãªã¢ã«ã¿ã€ã ãããã³ã«ã«è²»ãããŠããŸãã ãªãŒãã£ãªã«é¢é£ãããããããã®ãæãã圌ã¯ãHyperaudioãããžã§ã¯ãã§ã®å®éšã§ ãäœãæ°ããããšãããããšããä»äºã«æ ç±çã«åãçµãã§ããŸãã ããŒã¯ã®ãã€ãã¿ãŒããã©ããŒã§ããŸãã
次ã®éšåã®å 容ïŒ
â ããªããŒãã«é¢ãã泚æ
â æåããŸãã
â ã¡ãã£ã¢ã€ãã³ã
â ã¹ããªãŒãã³ã°
â ä»æ§ã®é²åïŒãŸãã¯ããããŒãããã¯åããŠããŸãïŒãïŒ
â ããŒãæ¹æ³
â ãã©ãŠã¶ã¯ãã€å ¬åŒããã¥ã¡ã³ãã«æ»ããŸããïŒ
â èªååçãšé³é
â è€æ°ã®ãªãŒãã£ãªã¿ã°ã®åæåç
â OSäŸå
â æ°æ©èœ
â ã¹ãããå€æŽ
â ã¡ãã£ã¢ãã©ã°ã¡ã³ã
â é«åºŠãªãªãŒãã£ãªAPIïŒãã©ãŠã¶ã®å°æ¥ã®ãµãŠã³ã
â ãããã«
â æåŠ
HTML5ãªãŒãã£ãªã¿ã°ã®ããŒã«ã«èšäºãšç¿»èš³ïŒ
* HTML5ã§ã®ãªãŒãã£ãªã®èŠèŠå ã2011幎8æ7æ¥
* HTML5 Audioã䜿çšããŠã«ã»ããã¬ã³ãŒããŒãäœæãã ã2012幎7æ13æ¥
* Audio Data APIã«ãããµãŠã³ãåŠç ã2010幎8æ30æ¥
* HTML5ãªãŒãã£ãªããã³ã²ãŒã éçºïŒãã©ãŠã¶ãŒã®ãã°ãåé¡ãšè§£æ±ºçãã¢ã€ã㢠ã2010幎8æ6æ¥
* HTML5ãªãŒãã£ãªã¿ã°ã®ãã¹ã¿ãªã³ã° ã2012幎7æ21æ¥
* HTML5 <Audio>ã®åé¡ ã2011幎5æ16æ¥
* HTML5ãªãŒãã£ãªãšãããªã䜿çšããæåŸã®modã 2012幎6æ13æ¥
ãã®èšäºã®ç¿»èš³ã®æçšæ§ãææããŠãããShpuntiKã«æè¬ããŸãã
UPDïŒ ç¬¬2éšã®ç¿»èš³ ã