chia sẻ:

Thư viện javascript cho HTML5 Audio

13/09/2011 08:02 | Thông tin công nghệ

Bạn muốn khi di chuột qua một nút, hình ảnh trên website sẽ xuất hiện âm thanh? Điều mà trước đây chỉ có thể làm được với Flash nay bạn có thể làm với HTML5. Thậm chí là dễ dàng hơn với Buzz - một thư viện javascript nhỏ giúp bạn điều khiển thành phần audio trong HTML5 dễ hơn.

Cách sử dụng

Sử dụng buzz rất đơn giản

`01`	`// Khai báo đường dẫn tới file âm thanh`

`02`	`// ví dụ bạn có file âm thanh là ntuts.ogg, ntuts.mp3 và ntuts.acc`

`03`	`// đặt trong thư mục /sounds thì bạn khai báo như sau`

`04`	`var` `mySound =` `new` `buzz.sound(` `"/sounds/ntuts", {`

`05`	`formats: [` `"ogg",` `"mp3",` `"acc"` `]`

06 });

`07`	`// Gọi âm thanh lên`

`08`	`mySound.play()`

`09`	`.fadeIn()`

10 .loop()

`11`	`.bind(` `"timeupdate",` `function() {`

`12`	`var` `timer = buzz.toTimer(` `this.getTime() );`

`13`	`document.getElementById(` `"timer"` `).innerHTML = timer;`

14 });

Ví dụ đơn giản: để khi di chuột qua #splash sẽ play mySound, bạn làm như sau (ở ví dụ dưới mình sử dụng jQuery để chọn và đưa sự kiện mouseenter vào #splash

`1`	`$(` `'#splash'` `).mouseenter(` `function() {`

`2`	`mySound.play();`

3 });

Danh mục

1	SELECT * FROM session WHERE session_id='9940ugaupttu044fha6u6696pc'	0.0003349781036377
2	SELECT * FROM session WHERE session_id='9940ugaupttu044fha6u6696pc'	0.00029397010803223
3	SELECT solution_id,_Icon,_Icon2,title,intro,image,slug FROM default_solution WHERE is_trash=0 order by order_no asc	0.0018279552459717
4	SELECT product_id,title,intro,slug,title_show FROM default_product WHERE is_trash=0 order by order_no asc	0.0026359558105469
5	SELECT news_id,reg_date,end_date,cat_id,slug_vn FROM default_news WHERE is_trash=0 and is_online=1 and (cat_id = '' or list_cat_id like '%\|\|%')	0.0088291168212891
6	SELECT * FROM default_setting WHERE setting_id='1'	0.00052690505981445
7	SELECT * FROM default_common WHERE common_id='1'	0.00076007843017578
8	SELECT * FROM default_headerlink WHERE is_trash=0 and parent_id=0 order by order_no ASC limit 0,5	0.0019497871398926
9	SELECT meta_id,config_link FROM default_meta WHERE short_url='/tin-tuc/thong-tin-cong-nghe/thu-vien-javascript-cho-html5-audio.html' limit 0,1	0.0052390098571777
10	SELECT blog_id,title_show,title,html_file_url,slug,intro FROM default_blog WHERE is_trash=0 and is_online=1 order by reg_date DESC limit 0,10	0.022485971450806
11	SELECT news_id FROM default_news WHERE is_trash=0 and is_online=1 and slug_vn='thu-vien-javascript-cho-html5-audio' LIMIT 0,1	0.003842830657959
12	SELECT * FROM default_news WHERE news_id='129'	0.00064301490783691
13	SELECT news_id,cat_id,title_vn FROM default_news WHERE is_trash=0 and is_online=1 and cat_id=9 and news_id<>'129' order by order_no desc LIMIT 0,3	0.018767118453979
14	SELECT cat_id,title FROM default_category WHERE is_trash=0 and parent_id=6 order by order_no asc	0.0016701221466064
15	SELECT news_id,title_vn FROM default_news WHERE is_trash=0 and is_online=1 and news_id<>'129' order by view_num desc LIMIT 0,5	0.020673990249634
16	SELECT news_id,title_vn FROM default_news WHERE is_trash=0 and is_online=1 and news_id<>'129' order by upd_date desc LIMIT 0,5	0.021222829818726
17	SELECT * FROM default_tracklink WHERE today='06' and target_id='129' and mod_page='news'	0.043071031570435
18	SELECT title_vn FROM default_news WHERE news_id='129'	0.00048208236694336
19	SELECT lang_id,value_2,value_1 FROM default_lang_front WHERE lang_id='vn' and keyword='Tin tức' limit 0,1	0.003004789352417
20	SELECT cat_id,slug_vn FROM default_news WHERE news_id='129'	0.0004432201385498
21	SELECT slug FROM default_category WHERE cat_id='9'	0.0003819465637207
22	SELECT * FROM default_meta WHERE config_link='/tin-tuc/thong-tin-cong-nghe/thu-vien-javascript-cho-html5-audio.html'	0.0059430599212646
23	SELECT * FROM default_meta WHERE config_link='/tin-tuc/thong-tin-cong-nghe/thu-vien-javascript-cho-html5-audio.html'	0.0055339336395264
24	SELECT intro_vn FROM default_news WHERE news_id='129'	0.00036215782165527
25	SELECT intro_vn FROM default_news WHERE news_id='129'	0.00038599967956543
26	SELECT cat_id,slug_vn FROM default_news WHERE news_id='129'	0.00037193298339844
27	SELECT slug FROM default_category WHERE cat_id='9'	0.0003960132598877
28	SELECT * FROM default_meta WHERE config_link='/tin-tuc/thong-tin-cong-nghe/thu-vien-javascript-cho-html5-audio.html'	0.0056629180908203
29	SELECT * FROM default_meta WHERE config_link='/tin-tuc/thong-tin-cong-nghe/thu-vien-javascript-cho-html5-audio.html'	0.0055208206176758
30	SELECT image FROM default_meta WHERE meta_id='39170'	0.00040698051452637
31	SELECT meta_id,config_value_title,config_value_intro,image,config_link FROM default_meta WHERE (config_link='/tin-tuc/thong-tin-cong-nghe/thu-vien-javascript-cho-html5-audio.html' or config_link='/tin-tuc/thong-tin-cong-nghe/thu-vien-javascript-cho-html5-audio.html') limit 1	0.0017671585083008
32	SELECT * FROM default_common WHERE common_id='1'	0.00054311752319336
33	SELECT cat_id FROM default_category WHERE is_trash=0 and parent_id='6' and cat_id NOT IN(8,15) order by order_no ASC	0.0011739730834961
34	SELECT cat_id FROM default_category WHERE is_trash=0 and parent_id='6' and cat_id IN (7,19,13,26) order by order_no ASC	0.0012578964233398
35	SELECT cat_id FROM default_category WHERE is_trash=0 and parent_id='36' order by order_no ASC	0.0011501312255859
36	SELECT footerlink_id FROM default_footerlink WHERE is_trash=0 and parent_id=0 order by order_no ASC limit 0,4	0.0013558864593506
37	SELECT lang_id,value_2,value_1 FROM default_lang_front WHERE lang_id='vn' and keyword='Sản phẩm' limit 0,1	0.002140998840332
38	SELECT product_id,title,intro,title_menu,logo,intro_menu,slug FROM default_product WHERE is_trash=0 and is_menu=1 and solution_menu_id='10' order by order_no ASC	0.0014290809631348
39	SELECT product_id,title,intro,title_menu,logo,intro_menu,slug FROM default_product WHERE is_trash=0 and is_menu=1 and solution_menu_id='11' order by order_no ASC	0.0018289089202881
40	SELECT product_id,title,intro,title_menu,logo,intro_menu,slug FROM default_product WHERE is_trash=0 and is_menu=1 and solution_menu_id='7' order by order_no ASC	0.001349925994873
41	SELECT product_id,title,intro,title_menu,logo,intro_menu,slug FROM default_product WHERE is_trash=0 and is_menu=1 and solution_menu_id='8' order by order_no ASC	0.0014820098876953
42	SELECT product_id,title,intro,title_menu,logo,intro_menu,slug FROM default_product WHERE is_trash=0 and is_menu=1 and solution_menu_id='9' order by order_no ASC	0.0015490055084229
43	SELECT lang_id,value_2,value_1 FROM default_lang_front WHERE lang_id='vn' and keyword='Khách hàng' limit 0,1	0.001777172088623
44	SELECT lang_id,value_2,value_1 FROM default_lang_front WHERE lang_id='vn' and keyword='Tài nguyên' limit 0,1	0.0018141269683838
45	SELECT lang_id,value_2,value_1 FROM default_lang_front WHERE lang_id='vn' and keyword='Giới thiệu' limit 0,1	0.001777172088623
46	SELECT lang_id,value_2,value_1 FROM default_lang_front WHERE lang_id='vn' and keyword='Đăng nhập' limit 0,1	0.0018739700317383
47	SELECT lang_id,value_2,value_1 FROM default_lang_front WHERE lang_id='vn' and keyword='Liên hệ' limit 0,1	0.0017690658569336
48	SELECT lang_id,value_2,value_1 FROM default_lang_front WHERE lang_id='vn' and keyword='Khách hàng' limit 0,1	0.001323938369751
49	SELECT lang_id,value_2,value_1 FROM default_lang_front WHERE lang_id='vn' and keyword='Tài nguyên' limit 0,1	0.0013859272003174
50	SELECT lang_id,value_2,value_1 FROM default_lang_front WHERE lang_id='vn' and keyword='Tài nguyên' limit 0,1	0.0012998580932617
51	SELECT lang_id,value_2,value_1 FROM default_lang_front WHERE lang_id='vn' and keyword='News' limit 0,1	0.001007080078125
52	SELECT lang_id,value_2,value_1 FROM default_lang_front WHERE lang_id='vn' and keyword='News' limit 0,1	0.0010042190551758
53	SELECT lang_id,value_2,value_1 FROM default_lang_front WHERE lang_id='vn' and keyword='Giới thiệu' limit 0,1	0.0010089874267578
54	SELECT lang_id,value_2,value_1 FROM default_lang_front WHERE lang_id='vn' and keyword='Giới thiệu' limit 0,1	0.0010170936584473
55	SELECT lang_id,value_2,value_1 FROM default_lang_front WHERE lang_id='vn' and keyword='Liên hệ' limit 0,1	0.0010139942169189
56	SELECT lang_id,value_2,value_1 FROM default_lang_front WHERE lang_id='vn' and keyword='Liên hệ' limit 0,1	0.0010068416595459
57	SELECT lang_id,value_2,value_1 FROM default_lang_front WHERE lang_id='vn' and keyword='Đăng nhập' limit 0,1	0.0010099411010742
58	SELECT reg_date FROM default_news WHERE news_id='129'	0.00022411346435547
59	SELECT upd_date FROM default_news WHERE news_id='129'	0.00027799606323242
60	SELECT lang_id,value_2,value_1 FROM default_lang_front WHERE lang_id='vn' and keyword='Home' limit 0,1	0.0012519359588623
61	SELECT lang_id,value_2,value_1 FROM default_lang_front WHERE lang_id='vn' and keyword='Home' limit 0,1	0.00099015235900879
62	SELECT lang_id,value_2,value_1 FROM default_lang_front WHERE lang_id='vn' and keyword='Tin tức' limit 0,1	0.0010309219360352
63	SELECT lang_id,value_2,value_1 FROM default_lang_front WHERE lang_id='vn' and keyword='Tin tức' limit 0,1	0.0010859966278076
64	SELECT slug FROM default_category WHERE cat_id='9'	0.0002589225769043
65	SELECT title FROM default_category WHERE cat_id='9'	0.00018596649169922
66	SELECT title FROM default_category WHERE cat_id='9'	0.00020885467529297
67	SELECT cat_id,slug_vn FROM default_news WHERE news_id='129'	0.00026798248291016
68	SELECT slug FROM default_category WHERE cat_id='9'	0.00019001960754395
69	SELECT title_vn FROM default_news WHERE news_id='129'	0.00022101402282715
70	SELECT title_vn FROM default_news WHERE news_id='129'	0.00028800964355469
71	SELECT title_vn FROM default_news WHERE news_id='129'	0.00023293495178223
72	SELECT cat_id,slug_vn FROM default_news WHERE news_id='129'	0.00026392936706543
73	SELECT slug FROM default_category WHERE cat_id='9'	0.00018501281738281
74	SELECT lang_id,value_2,value_1 FROM default_lang_front WHERE lang_id='vn' and keyword='Twitter' limit 0,1	0.0010058879852295
75	SELECT cat_id,slug_vn FROM default_news WHERE news_id='129'	0.00026798248291016
76	SELECT slug FROM default_category WHERE cat_id='9'	0.00019311904907227
77	SELECT lang_id,value_2,value_1 FROM default_lang_front WHERE lang_id='vn' and keyword='Printest' limit 0,1	0.0010590553283691
78	SELECT cat_id,slug_vn FROM default_news WHERE news_id='129'	0.00020098686218262
79	SELECT slug FROM default_category WHERE cat_id='9'	0.00022602081298828
80	SELECT title_vn FROM default_news WHERE news_id='129'	0.00026893615722656
81	SELECT lang_id,value_2,value_1 FROM default_lang_front WHERE lang_id='vn' and keyword='Facebook' limit 0,1	0.0010321140289307
82	SELECT title_vn FROM default_news WHERE news_id='129'	0.00028204917907715
83	SELECT reg_date FROM default_news WHERE news_id='129'	0.00021100044250488
84	SELECT slug FROM default_category WHERE cat_id='9'	0.00023984909057617
85	SELECT title FROM default_category WHERE cat_id='9'	0.00020003318786621
86	SELECT title FROM default_category WHERE cat_id='9'	0.00023794174194336
87	SELECT intro_vn FROM default_news WHERE news_id='129'	0.00017809867858887
88	SELECT content_vn FROM default_news WHERE news_id='129'	0.0003049373626709
89	SELECT slug FROM default_category WHERE cat_id='52'	0.00017404556274414
90	SELECT slug FROM default_category WHERE cat_id='7'	0.00020289421081543
91	SELECT slug FROM default_category WHERE cat_id='19'	0.0002448558807373
92	SELECT slug FROM default_category WHERE cat_id='9'	0.00020599365234375
93	SELECT slug FROM default_category WHERE cat_id='20'	0.00031495094299316
94	SELECT slug FROM default_category WHERE cat_id='12'	0.00024199485778809
95	SELECT slug FROM default_category WHERE cat_id='13'	0.00018501281738281
96	SELECT slug FROM default_category WHERE cat_id='14'	0.00020694732666016
97	SELECT slug FROM default_category WHERE cat_id='8'	0.00023508071899414
98	SELECT slug FROM default_category WHERE cat_id='11'	0.00017905235290527
99	SELECT slug FROM default_category WHERE cat_id='26'	0.00024795532226562
100	SELECT slug FROM default_category WHERE cat_id='48'	0.00017786026000977
101	SELECT cat_id,slug_vn FROM default_news WHERE news_id='580'	0.00022101402282715
102	SELECT slug FROM default_category WHERE cat_id='9'	0.000244140625
103	SELECT title_vn FROM default_news WHERE news_id='580'	0.00017786026000977
104	SELECT image FROM default_news WHERE news_id='580'	0.00026702880859375
105	SELECT slug FROM default_category WHERE cat_id='9'	0.00019598007202148
106	SELECT title FROM default_category WHERE cat_id='9'	0.00022196769714355
107	SELECT title FROM default_category WHERE cat_id='9'	0.00024914741516113
108	SELECT cat_id,slug_vn FROM default_news WHERE news_id='580'	0.00020003318786621
109	SELECT slug FROM default_category WHERE cat_id='9'	0.00024986267089844
110	SELECT cat_id,slug_vn FROM default_news WHERE news_id='549'	0.00020289421081543
111	SELECT slug FROM default_category WHERE cat_id='9'	0.0002288818359375
112	SELECT title_vn FROM default_news WHERE news_id='549'	0.00028896331787109
113	SELECT image FROM default_news WHERE news_id='549'	0.00023388862609863
114	SELECT slug FROM default_category WHERE cat_id='9'	0.00019097328186035
115	SELECT title FROM default_category WHERE cat_id='9'	0.0002129077911377
116	SELECT title FROM default_category WHERE cat_id='9'	0.0002589225769043
117	SELECT cat_id,slug_vn FROM default_news WHERE news_id='549'	0.0001981258392334
118	SELECT slug FROM default_category WHERE cat_id='9'	0.00021791458129883
119	SELECT cat_id,slug_vn FROM default_news WHERE news_id='537'	0.00025200843811035
120	SELECT slug FROM default_category WHERE cat_id='9'	0.00019097328186035
121	SELECT title_vn FROM default_news WHERE news_id='537'	0.00022006034851074
122	SELECT image FROM default_news WHERE news_id='537'	0.0002439022064209
123	SELECT slug FROM default_category WHERE cat_id='9'	0.00017905235290527
124	SELECT title FROM default_category WHERE cat_id='9'	0.00022411346435547
125	SELECT title FROM default_category WHERE cat_id='9'	0.00024604797363281
126	SELECT cat_id,slug_vn FROM default_news WHERE news_id='537'	0.00017595291137695
127	SELECT slug FROM default_category WHERE cat_id='9'	0.00021004676818848
128	SELECT lang_id,value_2,value_1 FROM default_lang_front WHERE lang_id='vn' and keyword='Nhập email để nhận bản tin mới nhất của VietISO' limit 0,1	0.00098395347595215
129	SELECT lang_id,value_2,value_1 FROM default_lang_front WHERE lang_id='vn' and keyword='Company' limit 0,1	0.00099301338195801
130	SELECT lang_id,value_2,value_1 FROM default_lang_front WHERE lang_id='vn' and keyword='About Us' limit 0,1	0.00098681449890137
131	SELECT lang_id,value_2,value_1 FROM default_lang_front WHERE lang_id='vn' and keyword='Khuyến mại' limit 0,1	0.00098490715026855
132	SELECT lang_id,value_2,value_1 FROM default_lang_front WHERE lang_id='vn' and keyword='Recruitment' limit 0,1	0.00099515914916992
133	SELECT lang_id,value_2,value_1 FROM default_lang_front WHERE lang_id='vn' and keyword='Contact' limit 0,1	0.00098800659179688
134	SELECT lang_id,value_2,value_1 FROM default_lang_front WHERE lang_id='vn' and keyword='News' limit 0,1	0.00098395347595215
135	SELECT lang_id,value_2,value_1 FROM default_lang_front WHERE lang_id='vn' and keyword='Giải pháp' limit 0,1	0.00099897384643555
136	SELECT lang_id,value_2,value_1 FROM default_lang_front WHERE lang_id='vn' and keyword='Resource' limit 0,1	0.0010249614715576
137	SELECT lang_id,value_2,value_1 FROM default_lang_front WHERE lang_id='vn' and keyword='Tài nguyên' limit 0,1	0.001011848449707
138	SELECT lang_id,value_2,value_1 FROM default_lang_front WHERE lang_id='vn' and keyword='Document' limit 0,1	0.0010221004486084
139	SELECT lang_id,value_2,value_1 FROM default_lang_front WHERE lang_id='vn' and keyword='Support' limit 0,1	0.0010340213775635
140	SELECT lang_id,value_2,value_1 FROM default_lang_front WHERE lang_id='vn' and keyword='Nhập email để nhận bản tin mới nhất của VietISO' limit 0,1	0.00094699859619141
141	SELECT lang_id,value_2,value_1 FROM default_lang_front WHERE lang_id='vn' and keyword='Youtube' limit 0,1	0.00095415115356445
142	SELECT lang_id,value_2,value_1 FROM default_lang_front WHERE lang_id='vn' and keyword='Twitter' limit 0,1	0.00094389915466309
143	SELECT lang_id,value_2,value_1 FROM default_lang_front WHERE lang_id='vn' and keyword='LinkedIn' limit 0,1	0.00094389915466309
144	SELECT lang_id,value_2,value_1 FROM default_lang_front WHERE lang_id='vn' and keyword='Facebook' limit 0,1	0.00092506408691406

Thư viện javascript cho HTML5 Audio

Cách sử dụng

Thông báo Update Phần mềm TravelMaster

Google chính thức tăng giá bộ sản phẩm G Suite sau 1 thập kỷ phát hành

Google thêm cơ chế 'chống bỏ xem' quảng cáo trên YouTube

Company

Giải pháp

Resource