audio HTML 5 audio srcDreams ogg controls autoplay

Audio Formats https: //www. w 3 schools. com/html 5_audio. asp

Properties controls autoplay seeking paused muted ended true | false true | false src

Methods load() play() pause() can. Play. Type("audio/subtype") Reference: http: //www. w 3 schools. com/tags/ref_av_dom.

<head> <script type="text/javascript"> var s 1; window. onload = function() { s 1 =

Example n n n http: //ycchen. im. ncnu. edu. tw/www 2011/lab/audio/Time. Rec. html http:

<video> (HTML 5) <video id="video 1" width="420"> <source src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20760%20570%22%3E%3C/svg%3E' data-src="mov_bbb. mp 4" type="video/mp 4"> <source

Video Formats https: //www. w 3 schools. com/tags/tag_video. asp

References n HTML 5 Audio http: //w 3 schools. com/html 5_audio. asp n HTML

What's New in ECMAScript 6? (Java. Script 6) n n n Java. Script let

n let q n https: //www. w 3 schools. com/js/js_let. asp const q https:

3 Scopes: Global, Function, Block var g=3; function sum() { var f=0; … }

Fat Arrow Function (param 1, param 2, …, param. N) => { statements }

array 的map( )與for. Each() method map() q https: //www. w 3 schools. com/jsref_map. asp

array 的map( )與for. Each() method for. Each() q q q https: //www. w 3

Slides: 15

Download presentation

<audio> (HTML 5) <audio src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20415%20289%22%3E%3C/svg%3E' data-src="Dreams. ogg" controls autoplay loop preload> Audio </audio> <audio id="song"

<audio> (HTML 5) <audio src="Dreams. ogg" controls autoplay loop preload> Audio </audio> <audio id="song" preload="auto" > <source src="Dreams. ogg" type="audio/ogg" /> <source src="Dreams. mp 3" type="audio/mpeg" /> </audio>

Audio Formats https: //www. w 3 schools. com/html 5_audio. asp

Properties controls autoplay seeking paused muted ended true | false true | false src volume 0~1 duration seconds current. Time seconds

Methods load() play() pause() can. Play. Type("audio/subtype") Reference: http: //www. w 3 schools. com/tags/ref_av_dom. asp

<head> <script type="text/javascript"> var s 1; window. onload = function() { s 1 = document. get. Element. By. Id("song 1"); . . . } s 1. play(); s 1. pause(); s 1. controls = true; s 1. current. Time= 17. 5; s 1. volume = 0. 5; </script> </head> <body>. . . <audio id="song 1" src="dreams. ogg"></audio>. . . </body> </html>

Example n n n http: //ycchen. im. ncnu. edu. tw/www 2011/lab/audio/Time. Rec. html http: //ycchen. im. ncnu. edu. tw/www 2011/lab/audio/ans/Longer. html http: //ycchen. im. ncnu. edu. tw/www 2011/lab/audio/ans/So. S. html

<video> (HTML 5) <video id="video 1" width="420"> <source src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20415%20289%22%3E%3C/svg%3E' data-src="mov_bbb. mp 4" type="video/mp 4"> <source

<video> (HTML 5) <video id="video 1" width="420"> <source src="mov_bbb. mp 4" type="video/mp 4"> <source src="mov_bbb. ogg" type="video/ogg"> Your browser does not support HTML 5 video. </video> <video id="video 1" width="420" controls loop autoplay preload> … </video> https: //www. w 3 schools. com/html/tryit. asp? filename=tryhtml 5_video_js_prop

Video Formats https: //www. w 3 schools. com/tags/tag_video. asp

References n HTML 5 Audio http: //w 3 schools. com/html 5_audio. asp n HTML 5 Video http: //w 3 schools. com/html 5_video. asp n 格式廠 q http: //www. pcfreetime. com/CN/download. html

What's New in ECMAScript 6? (Java. Script 6) n n n Java. Script let Java. Script const Java. Script default parameter values Array. find() Array. find. Index() https: //www. w 3 schools. com/js/js_es 6. asp

n let q n https: //www. w 3 schools. com/js/js_let. asp const q https: //www. w 3 schools. com/js/js_const. asp

3 Scopes: Global, Function, Block var g=3; function sum() { var f=0; … } Global scope Function scope ü var只支援Global與Function scope ü 使用let來宣告Block scope變數 for (var i=0; i<10; i++) { Block scope let b=0; }

Fat Arrow Function (param 1, param 2, …, param. N) => { statements } (param 1, param 2, …, param. N) => expression // 等於： => { return expression; } // 只有一個參數時, 括號才能不加: (single. Param) => { statements } single. Param => { statements } //若無參數, 就一定要加括號: () => { statements } const max = (a, b) => { if (a>=b) return a; else return b; }; const sum= (a, b) => a+b; const first. H 1 = () => { var h 1 Arr=document. get. Elements. By. Tag. Name("h 1"); return h 1 Arr[0]; };

array 的map( )與for. Each() method map() q https: //www. w 3 schools. com/jsref_map. asp The map() method creates a new array with the results of calling a function for every array element. q array. map(function(current. Value, index, arr), this. Value) q var r. Arr = [2, 1. 5, 3, 12, 8]; var area. Arr=r. Arr. map(area); var area. Arr=r. Arr. map(r => Math. PI*r*r); function area(r) { return Math. PI*r*r; }

array 的map( )與for. Each() method for. Each() q q q https: //www. w 3 schools. com/jsref_for. Each. asp The for. Each() method calls a provided function once for each element in an array, in order. array. for. Each(function(current. Value, index, arr), this. Value) var data. Arr = [150, 32, 67, 125]; data. Arr. for. Each(bar. Chart); data. Arr. for. Each( (val) => { function bar. Chart(val) { // Draw a bar in HTML for each data. });