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='7guj3dpipmdkcej4biaad4sp9e'	0.00055885314941406
2	SELECT * FROM session WHERE session_id='7guj3dpipmdkcej4biaad4sp9e'	0.000244140625
3	SELECT solution_id,_Icon,_Icon2,title,intro,image,slug FROM default_solution WHERE is_trash=0 order by order_no asc	0.0015628337860107
4	SELECT product_id,title,intro,slug,title_show FROM default_product WHERE is_trash=0 order by order_no asc	0.0018439292907715
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.0067629814147949
6	SELECT * FROM default_setting WHERE setting_id='1'	0.00043606758117676
7	SELECT * FROM default_common WHERE common_id='1'	0.0004889965057373
8	SELECT * FROM default_headerlink WHERE is_trash=0 and parent_id=0 order by order_no ASC limit 0,5	0.0011827945709229
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.0028188228607178
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.018780946731567
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.0031599998474121
12	SELECT * FROM default_news WHERE news_id='129'	0.00045299530029297
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.014983892440796
14	SELECT cat_id,title FROM default_category WHERE is_trash=0 and parent_id=6 order by order_no asc	0.0015082359313965
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.01827597618103
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.015056848526001
17	SELECT * FROM default_tracklink WHERE today='09' and target_id='129' and mod_page='news'	0.024132966995239
18	SELECT title_vn FROM default_news WHERE news_id='129'	0.00032687187194824
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.0021100044250488
20	SELECT cat_id,slug_vn FROM default_news WHERE news_id='129'	0.00034093856811523
21	SELECT slug FROM default_category WHERE cat_id='9'	0.00024795532226562
22	SELECT * FROM default_meta WHERE config_link='/tin-tuc/thong-tin-cong-nghe/thu-vien-javascript-cho-html5-audio.html'	0.003040075302124
23	SELECT * FROM default_meta WHERE config_link='/tin-tuc/thong-tin-cong-nghe/thu-vien-javascript-cho-html5-audio.html'	0.0030200481414795
24	SELECT intro_vn FROM default_news WHERE news_id='129'	0.00027203559875488
25	SELECT intro_vn FROM default_news WHERE news_id='129'	0.0002601146697998
26	SELECT cat_id,slug_vn FROM default_news WHERE news_id='129'	0.0003211498260498
27	SELECT slug FROM default_category WHERE cat_id='9'	0.0003049373626709
28	SELECT * FROM default_meta WHERE config_link='/tin-tuc/thong-tin-cong-nghe/thu-vien-javascript-cho-html5-audio.html'	0.0030498504638672
29	SELECT * FROM default_meta WHERE config_link='/tin-tuc/thong-tin-cong-nghe/thu-vien-javascript-cho-html5-audio.html'	0.0029809474945068
30	SELECT image FROM default_meta WHERE meta_id='39170'	0.00031089782714844
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.0013480186462402
32	SELECT * FROM default_common WHERE common_id='1'	0.00037693977355957
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.00095295906066895
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.00090503692626953
35	SELECT cat_id FROM default_category WHERE is_trash=0 and parent_id='36' order by order_no ASC	0.00084590911865234
36	SELECT footerlink_id FROM default_footerlink WHERE is_trash=0 and parent_id=0 order by order_no ASC limit 0,4	0.00091290473937988
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.0014841556549072
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.0012149810791016
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.0010678768157959
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.00093984603881836
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.0010230541229248
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.00099587440490723
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.0012428760528564
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.0012099742889404
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.0011899471282959
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.0012178421020508
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.0011968612670898
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.0013711452484131
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.0011579990386963
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.0011618137359619
51	SELECT lang_id,value_2,value_1 FROM default_lang_front WHERE lang_id='vn' and keyword='News' limit 0,1	0.001162052154541
52	SELECT lang_id,value_2,value_1 FROM default_lang_front WHERE lang_id='vn' and keyword='News' limit 0,1	0.0012168884277344
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.0012059211730957
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.0011780261993408
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.0011692047119141
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.0011699199676514
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.0011570453643799
58	SELECT reg_date FROM default_news WHERE news_id='129'	0.00039100646972656
59	SELECT upd_date FROM default_news WHERE news_id='129'	0.00027990341186523
60	SELECT lang_id,value_2,value_1 FROM default_lang_front WHERE lang_id='vn' and keyword='Home' limit 0,1	0.0016610622406006
61	SELECT lang_id,value_2,value_1 FROM default_lang_front WHERE lang_id='vn' and keyword='Home' limit 0,1	0.0012378692626953
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.0016031265258789
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.0014560222625732
64	SELECT slug FROM default_category WHERE cat_id='9'	0.00030398368835449
65	SELECT title FROM default_category WHERE cat_id='9'	0.00029587745666504
66	SELECT title FROM default_category WHERE cat_id='9'	0.0002601146697998
67	SELECT cat_id,slug_vn FROM default_news WHERE news_id='129'	0.00026297569274902
68	SELECT slug FROM default_category WHERE cat_id='9'	0.00025105476379395
69	SELECT title_vn FROM default_news WHERE news_id='129'	0.00023508071899414
70	SELECT title_vn FROM default_news WHERE news_id='129'	0.00020313262939453
71	SELECT title_vn FROM default_news WHERE news_id='129'	0.00028610229492188
72	SELECT cat_id,slug_vn FROM default_news WHERE news_id='129'	0.00028491020202637
73	SELECT slug FROM default_category WHERE cat_id='9'	0.0002448558807373
74	SELECT lang_id,value_2,value_1 FROM default_lang_front WHERE lang_id='vn' and keyword='Twitter' limit 0,1	0.0013539791107178
75	SELECT cat_id,slug_vn FROM default_news WHERE news_id='129'	0.00025415420532227
76	SELECT slug FROM default_category WHERE cat_id='9'	0.00021815299987793
77	SELECT lang_id,value_2,value_1 FROM default_lang_front WHERE lang_id='vn' and keyword='Printest' limit 0,1	0.0012240409851074
78	SELECT cat_id,slug_vn FROM default_news WHERE news_id='129'	0.00032615661621094
79	SELECT slug FROM default_category WHERE cat_id='9'	0.0003049373626709
80	SELECT title_vn FROM default_news WHERE news_id='129'	0.00027799606323242
81	SELECT lang_id,value_2,value_1 FROM default_lang_front WHERE lang_id='vn' and keyword='Facebook' limit 0,1	0.0012609958648682
82	SELECT title_vn FROM default_news WHERE news_id='129'	0.00025486946105957
83	SELECT reg_date FROM default_news WHERE news_id='129'	0.00024294853210449
84	SELECT slug FROM default_category WHERE cat_id='9'	0.00022578239440918
85	SELECT title FROM default_category WHERE cat_id='9'	0.00031399726867676
86	SELECT title FROM default_category WHERE cat_id='9'	0.00028896331787109
87	SELECT intro_vn FROM default_news WHERE news_id='129'	0.00026988983154297
88	SELECT content_vn FROM default_news WHERE news_id='129'	0.00040411949157715
89	SELECT slug FROM default_category WHERE cat_id='52'	0.00027012825012207
90	SELECT slug FROM default_category WHERE cat_id='7'	0.00025510787963867
91	SELECT slug FROM default_category WHERE cat_id='19'	0.00021791458129883
92	SELECT slug FROM default_category WHERE cat_id='9'	0.00030088424682617
93	SELECT slug FROM default_category WHERE cat_id='20'	0.00029087066650391
94	SELECT slug FROM default_category WHERE cat_id='12'	0.00025415420532227
95	SELECT slug FROM default_category WHERE cat_id='13'	0.00021505355834961
96	SELECT slug FROM default_category WHERE cat_id='14'	0.00029897689819336
97	SELECT slug FROM default_category WHERE cat_id='8'	0.00027585029602051
98	SELECT slug FROM default_category WHERE cat_id='11'	0.00024008750915527
99	SELECT slug FROM default_category WHERE cat_id='26'	0.00022411346435547
100	SELECT slug FROM default_category WHERE cat_id='48'	0.00028896331787109
101	SELECT cat_id,slug_vn FROM default_news WHERE news_id='594'	0.00037717819213867
102	SELECT slug FROM default_category WHERE cat_id='9'	0.00024008750915527
103	SELECT title_vn FROM default_news WHERE news_id='594'	0.00026917457580566
104	SELECT image FROM default_news WHERE news_id='594'	0.00029897689819336
105	SELECT slug FROM default_category WHERE cat_id='9'	0.00027298927307129
106	SELECT title FROM default_category WHERE cat_id='9'	0.0002601146697998
107	SELECT title FROM default_category WHERE cat_id='9'	0.00024986267089844
108	SELECT cat_id,slug_vn FROM default_news WHERE news_id='594'	0.00026202201843262
109	SELECT slug FROM default_category WHERE cat_id='9'	0.00023913383483887
110	SELECT cat_id,slug_vn FROM default_news WHERE news_id='580'	0.0002281665802002
111	SELECT slug FROM default_category WHERE cat_id='9'	0.00029301643371582
112	SELECT title_vn FROM default_news WHERE news_id='580'	0.00026297569274902
113	SELECT image FROM default_news WHERE news_id='580'	0.00024700164794922
114	SELECT slug FROM default_category WHERE cat_id='9'	0.00022792816162109
115	SELECT title FROM default_category WHERE cat_id='9'	0.00028800964355469
116	SELECT title FROM default_category WHERE cat_id='9'	0.00031709671020508
117	SELECT cat_id,slug_vn FROM default_news WHERE news_id='580'	0.00030398368835449
118	SELECT slug FROM default_category WHERE cat_id='9'	0.00026392936706543
119	SELECT cat_id,slug_vn FROM default_news WHERE news_id='549'	0.00025200843811035
120	SELECT slug FROM default_category WHERE cat_id='9'	0.00023007392883301
121	SELECT title_vn FROM default_news WHERE news_id='549'	0.0003211498260498
122	SELECT image FROM default_news WHERE news_id='549'	0.00029182434082031
123	SELECT slug FROM default_category WHERE cat_id='9'	0.00025796890258789
124	SELECT title FROM default_category WHERE cat_id='9'	0.00024294853210449
125	SELECT title FROM default_category WHERE cat_id='9'	0.0002591609954834
126	SELECT cat_id,slug_vn FROM default_news WHERE news_id='549'	0.00023984909057617
127	SELECT slug FROM default_category WHERE cat_id='9'	0.00021791458129883
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.0014939308166504
129	SELECT lang_id,value_2,value_1 FROM default_lang_front WHERE lang_id='vn' and keyword='Company' limit 0,1	0.0011870861053467
130	SELECT lang_id,value_2,value_1 FROM default_lang_front WHERE lang_id='vn' and keyword='About Us' limit 0,1	0.0011739730834961
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.0011820793151855
132	SELECT lang_id,value_2,value_1 FROM default_lang_front WHERE lang_id='vn' and keyword='Recruitment' limit 0,1	0.0011990070343018
133	SELECT lang_id,value_2,value_1 FROM default_lang_front WHERE lang_id='vn' and keyword='Contact' limit 0,1	0.0011999607086182
134	SELECT lang_id,value_2,value_1 FROM default_lang_front WHERE lang_id='vn' and keyword='News' limit 0,1	0.0012280941009521
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.0011258125305176
136	SELECT lang_id,value_2,value_1 FROM default_lang_front WHERE lang_id='vn' and keyword='Resource' limit 0,1	0.0011539459228516
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.0011460781097412
138	SELECT lang_id,value_2,value_1 FROM default_lang_front WHERE lang_id='vn' and keyword='Document' limit 0,1	0.0011649131774902
139	SELECT lang_id,value_2,value_1 FROM default_lang_front WHERE lang_id='vn' and keyword='Support' limit 0,1	0.0011401176452637
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.0011560916900635
141	SELECT lang_id,value_2,value_1 FROM default_lang_front WHERE lang_id='vn' and keyword='Youtube' limit 0,1	0.0011599063873291
142	SELECT lang_id,value_2,value_1 FROM default_lang_front WHERE lang_id='vn' and keyword='Twitter' limit 0,1	0.0011270046234131
143	SELECT lang_id,value_2,value_1 FROM default_lang_front WHERE lang_id='vn' and keyword='LinkedIn' limit 0,1	0.0011298656463623
144	SELECT lang_id,value_2,value_1 FROM default_lang_front WHERE lang_id='vn' and keyword='Facebook' limit 0,1	0.0012137889862061

Thư viện javascript cho HTML5 Audio

Cách sử dụng

Blockchain và tương lai của Ngành Du lịch

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

Company

Giải pháp

Resource