Làm thế nào nào để tạo hình ảnh sẽ chạy âm thanh khi được click? | How to create image play a sound with HTML5 when click?

Trong bài trước tôi có giới thiệu tag <audio> một tag mạnh mẽ và nhanh chóng để show (trình diễn) media trên website của HTML5.

Tuy nhiên trong thực tế thì đôi khi ta cần thể hiện một cái gì đó khác hơn, và cụ thể ở đây là muốn khi ta nhấn vào một hình ảnh nào đó thì sẽ phát ra âm thanh, việc này tượng trưng cho việc image sẽ là nút play.

Bạn có thể dễ dàng thấy được ứng dụng của nó trong thực tế ở các trang web từ điển bạn sẽ thấy biểu tượng icon sound khi ta nhấn vào đó thì sẽ có âm thanh xuất hiện, hoặc bạn cũng có thể thấy điều tương tự ở các trang học tiếng anh, khi ta click vào một hình ảnh nào đó thì nó sẽ phát ra âm thanh.

Trước đây khi chưa có HTML5 để thực hiện điều này khá phức tạp vì phải sử dụng JavaScript, tuy nhiên với sự xuất hiện của HTML5 thì nó đã trở nên vô cùng dễ dàng chỉ với hai dòng code ngắn như sau là bạn có thể làm được.

<audio id="sound1" src="http://www.oxforddictionaries.com/media/english/uk_pron_ogg/s/sch/schoo/school__gb_1.ogg" preload="auto"></audio>
<img src="http://www.ducksters.com/science/sound.png" onclick="document.getElementById('sound1').play();" />

Và đây là kết quả, bạn thử click vào xem :))