Bạn không thể thao tác vật lý với âm thanh bằng HTML5 Canvas trực tiếp như khi bạn có thể quay video, nhưng nhiều ứng dụng canvas có thể sử dụng chiều âm thanh bổ sung đó. Âm thanh được thể hiện bằng đối tượng
var audioType = supportedAudioFormat[audioElement];6 được thao tác thông qua JavaScript và bằng thẻ
var audioType = supportedAudioFormat[audioElement];7 trong HTML5. Không có API Canvas cho âm thanh và cũng không thực sự cần thiết. Tuy nhiên, có nhiều cách mà bạn có thể muốn sử dụng âm thanh với HTML5 Canvas
Cách sử dụng cơ bản của thẻ
var audioType = supportedAudioFormat[audioElement];7 trong HTML5 rất giống với cách sử dụng của thẻ
var audioType = supportedAudioFormat[audioElement];7. Thuộc tính bắt buộc duy nhất là
00, thuộc tính này cần trỏ đến một tệp âm thanh hiện có để phát trong trình duyệt. Tất nhiên, thật tuyệt khi hiển thị một số điều khiển âm thanh trên trang và điều này có thể được thực hiện bằng cách sử dụng Boolean
01, giống như chúng ta đã làm với
var audioType = supportedAudioFormat[audioElement];7
Mã trong Ví dụ 7-1 sẽ tải và phát bài hát1. ogg trong một trình duyệt web hỗ trợ. phát lại tệp ogg, như minh họa trong Hình 7-1. [Lời nhắc nhở. không phải tất cả các trình duyệt đều hỗ trợ tất cả các định dạng. ]
Ví dụ 7-1. Âm thanh HTML5 cơ bản
CH7EX1: Basic HTML5 AudioYour browser does not support the audio element.
Hình 7-1. Thẻ HTML5 rất cơ bản
Tương tự như các định dạng video mà chúng ta đã tìm hiểu trong Chương 6, không phải mọi trình duyệt web đều hỗ trợ mọi định dạng âm thanh. Trên thực tế, hỗ trợ âm thanh dường như kém hơn video. Như bạn sẽ sớm khám phá ra trong chương này, âm thanh là nơi mà HTML5 cần phải làm việc nghiêm túc. Tuy nhiên, chúng tôi sẽ chỉ cho bạn một số chiến lược và giải pháp để làm cho âm thanh dễ sử dụng hơn trong các ứng dụng của bạn
Dưới đây là biểu đồ nhanh cho bạn biết định dạng âm thanh nào được trình duyệt nào hỗ trợ. Chúng tôi sẽ không sử dụng số phiên bản ở đây vì chúng tôi cho rằng phiên bản mới nhất của từng sản phẩm
Nền tảng
ogg
mp3
làn sóng
Trình duyệt Chrome
X
X
firefox
X
X
Cuộc đi săn
X
X
Ô-pê-ra
X
X
Internet Explorer 9
X
X
Tình hình rất giống với thẻ
var audioType = supportedAudioFormat[audioElement];7. Để hỗ trợ
var audioType = supportedAudioFormat[audioElement];7, chúng tôi sẽ cần sử dụng nhiều định dạng riêng biệt cho từng đoạn âm thanh mà chúng tôi muốn phát. Để đảm bảo an toàn, chúng tôi sẽ sử dụng ba định dạng. . mp3,. ogg, và. làn sóng
May mắn thay, có sẵn một công cụ âm thanh miễn phí tuyệt vời giúp bạn chuyển đổi âm thanh sang bất kỳ định dạng nào. Trong trường hợp của chúng tôi, chúng tôi cần phải chuyển đổi thành. mp3,. ogg, và. làn sóng
táo bạo [http. // táo bạo. nguồn. net/] là một dự án đa nền tảng, mã nguồn mở được thiết kế để mang lại khả năng chỉnh sửa âm thanh phức tạp cho máy tính để bàn. Phiên bản hiện tại hoạt động trên Mac, Windows và Linux
Hình 7-2 hiển thị một màn hình mẫu từ Audacity. Khi bạn tải âm thanh vào Audacity, nó sẽ hiển thị dạng sóng của âm thanh. Bạn có thể điều khiển âm thanh theo nhiều cách, bao gồm cắt, tách và sao chép, sau đó thêm các hiệu ứng như mờ dần, tạo tiếng vang, đảo ngược, v.v. Sau khi chỉnh sửa âm thanh, bạn xuất nó sang định dạng âm thanh mà bạn muốn tạo. Trong trường hợp của chúng tôi, đó sẽ là. ogg,. sóng và. mp3
Ghi chú
Chúng tôi không có đủ chỗ ở đây để mô tả đầy đủ cách sử dụng một công cụ âm thanh như Audacity, nhưng chúng tôi cần cung cấp cho bạn một lưu ý. phiên bản phân phối của Audacity không hỗ trợ xuất âm thanh trong. định dạng mp3. Xuất khẩu. âm thanh mp3, bạn sẽ cần tải xuống LAME. bộ mã hóa mp3 từ http. //què. nguồn. net/. LAME cũng là một dự án mã nguồn mở
Hình 7-2. Chỉnh sửa tệp âm thanh trong Audacity
Thí dụ. Sử dụng cả ba định dạng
Trong Ví dụ 7-2, chúng ta sẽ nhúng một bài hát dài 40 giây, bài hát1, vào trang HTML5 và phát bài hát đó. Để đảm bảo bài hát1 có thể phát trên nhiều trình duyệt nhất có thể, chúng tôi sẽ nhúng bài hát đó với ba nguồn khác nhau. Đối với ví dụ này, chúng tôi cũng sẽ đặt các thuộc tính
05,
06 và
01 để bài hát sẽ tự động bắt đầu, phát lại khi kết thúc và hiển thị các điều khiển âm thanh mặc định của trình duyệt. Đây là mã để nhúng bài hát1
Ghi chú
Giống như chúng tôi đã làm với video, chúng tôi đã đặt loại âm thanh có hỗ trợ rộng nhất cho các thiết bị iOS đầu tiên trong danh sách. Điều này là do các thiết bị cầm tay không hoạt động tốt với nhiều nguồn nhúng
Chúng tôi tạo ra. ogg,. sóng và. phiên bản mp3 của bài hát bằng Audacity. Ví dụ 7-2 cung cấp mã đầy đủ
Ví dụ 7-2. Âm thanh HTML5 cơ bản được xem lại
var audioType = supportedAudioFormat[audioElement];4
Ghi chú
bài hát1 đã được tạo cách đây 10 năm bằng cách sử dụng phần mềm lặp nhạc Acid của Sonic Foundry. Axit là một công cụ tuyệt vời để tạo nhạc phim vì nó có thể giúp ích cho cả những người không rành về âm nhạc [đọc. chúng tôi] tạo các bài hát có âm thanh hoàn hảo cho các trò chơi và ứng dụng. Axit hiện chỉ được Sony bán cho Windows. Bài hát có thể được tạo trên máy Mac theo cách tương tự bằng GarageBand
Thuộc tính, chức năng và sự kiện của thẻ âm thanh
Tương tự như thẻ
var audioType = supportedAudioFormat[audioElement];7, thẻ
var audioType = supportedAudioFormat[audioElement];7 trong HTML5 dựa trên đối tượng DOM
10
11, có nguồn gốc từ
12
13
Bắt đầu tải tệp âm thanh được chỉ định bởi thuộc tính
00 của thẻ
var audioType = supportedAudioFormat[audioElement];7
16
Bắt đầu phát tệp âm thanh được chỉ định bởi thuộc tính
00 của thẻ
var audioType = supportedAudioFormat[audioElement];7. Nếu tệp chưa sẵn sàng, nó sẽ được tải
19
Tạm dừng tệp âm thanh đang phát
20
Chấp nhận loại MIME làm tham số và trả về giá trị
21 hoặc
22 nếu trình duyệt có thể phát loại tệp âm thanh đó. Nó trả về
23 [một chuỗi rỗng] nếu không thể
Thuộc tính âm thanh quan trọng
Có nhiều thuộc tính được định nghĩa cho phần tử
24 trong HTML5. Chúng tôi sẽ tập trung vào những điều sau đây vì chúng hữu ích nhất cho các ứng dụng mà chúng tôi sẽ xây dựng
25
Tổng độ dài, tính bằng giây, của âm thanh được đại diện bởi đối tượng
24
27
Vị trí phát hiện tại, tính bằng giây, của tệp âm thanh đang phát
06
29 hoặc
30. liệu đoạn âm thanh có nên bắt đầu phát ngay từ đầu khi
27 đến
25 hay không
05
29 hoặc
30. liệu âm thanh có bắt đầu phát tự động khi được tải hay không
36
29 hoặc
30. Đặt điều này thành
29 sẽ tắt tiếng đối tượng
24 bất kể cài đặt
41
01
29 hoặc
30. Hiển thị các điều khiển cho đối tượng
24 trong trang HTML. Các điều khiển sẽ không hiển thị trên canvas trừ khi chúng được tạo bằng HTML [ví dụ: với
lớp phủ]
41
Mức âm lượng của đối tượng
24;
50
29 hoặc
30. liệu đối tượng
24 có bị tạm dừng hay không. Đặt bằng lệnh gọi hàm
19
55
29 hoặc
30. Đặt khi một đối tượng
24 đã phát qua toàn bộ
25 của nó
60
URL tới tệp nguồn cho đối tượng
24
62
Chỉ định xem tệp phương tiện có nên được tải trước khi trang được hiển thị hay không. Tại thời điểm viết bài này, thuộc tính này chưa được triển khai trên tất cả các trình duyệt
Nhiều sự kiện được xác định cho phần tử HTML5
24. Chúng tôi sẽ tập trung vào các sự kiện sau vì chúng đã được chứng minh là hoạt động khi xây dựng các ứng dụng âm thanh
64
Xảy ra khi trình duyệt đang truy xuất dữ liệu trong khi tải tệp. [Điều này vẫn còn hỗ trợ không chính xác trong các trình duyệt, vì vậy hãy cẩn thận với nó. ]
65
Xảy ra khi trình duyệt tính toán rằng phần tử phương tiện có thể được phát từ đầu đến cuối nếu bắt đầu ngay lập tức
66
Đặt thành
29 khi âm thanh đang được phát
68
Đặt khi thuộc tính
41 hoặc thuộc tính
36 thay đổi
55
Đặt khi quá trình phát đạt đến
25 của tệp âm thanh và tệp dừng phát
Đang tải và phát âm thanh
Chúng tôi sẽ sử dụng các sự kiện
65 và
64 để tải
var audioType = supportedAudioFormat[audioElement];7 trước khi thử phát nó. Đây là cách chúng tôi nhúng âm thanh cho bài hát1
var audioType = supportedAudioFormat[audioElement];3
Tương tự như hầu hết các ứng dụng chúng tôi đã xây dựng cho đến nay trong cuốn sách này, chúng tôi sẽ tạo các trình xử lý sự kiện cho
64 và
65 sau khi đối tượng DOM
78 đã tải xong, sau đó gọi phương thức
13 của
80 để buộc tệp âm thanh bắt đầu tải
var audioType = supportedAudioFormat[audioElement];9
Khi sự kiện
65 được gửi đi,
82 được gọi. Sau đó, chúng tôi bắt đầu phát âm thanh bằng cách truy xuất tham chiếu đến phần tử
24 trong trang HTML thông qua DOM, với lệnh gọi tới
84. [Chúng ta sẽ tạo một biến có tên là
80 mà chúng ta sẽ sử dụng trong toàn bộ ứng dụng canvas để tham chiếu phần tử
24 trong trang HTML. ] Sau đó, chúng tôi gọi hàm
16 của
80
var audioType = supportedAudioFormat[audioElement];8
Bạn có thể thắc mắc tại sao chúng tôi không sử dụng thuộc tính
62 của
var audioType = supportedAudioFormat[audioElement];6 thay vì buộc nó tải bằng cách lắng nghe sự kiện
65. Có hai lý do cho việc này và cả hai đều áp dụng cho phần tử
92. Trước tiên, bạn muốn tải trước để chắc chắn rằng tài sản bạn cần có sẵn cho chương trình của bạn khi chạy. Thứ hai, tải trước đảm bảo rằng người dùng sẽ thấy điều gì đó hữu ích hoặc thú vị trong khi mọi thứ đang tải. Bằng cách sử dụng thuộc tính
62 tiêu chuẩn, bạn [về lý thuyết] buộc nội dung âm thanh của mình tải trước khi tải trang. Vì ứng dụng canvas có tính tương tác và có thể yêu cầu nhiều nội dung hơn những nội dung được tải khi tải trang nên chúng tôi tránh thuộc tính
62 và tải nội dung trong ứng dụng
Hiển thị các thuộc tính trên Canvas
Bây giờ chúng ta sẽ hiển thị các giá trị thuộc tính của phần tử
24 đang phát trên trang HTML. Trong ví dụ này [CH7EX3. html], chúng tôi cũng sẽ hiển thị phần tử
24 trong trang HTML để bạn có thể thấy mối quan hệ giữa những gì được hiển thị trên canvas và trạng thái của thẻ
var audioType = supportedAudioFormat[audioElement];7 trong trang
Trong hàm
98 chúng ta sẽ thêm đoạn mã sau để hiển thị các thuộc tính của biến
80
var audioType = supportedAudioFormat[audioElement];10
Bạn đã quen thuộc với hầu hết các thuộc tính này. Khi bạn chạy Ví dụ 7-3 [CH7EX3. html], chơi với các điều khiển âm thanh trong trình duyệt. Bạn sẽ nhận thấy rằng các thay đổi được phản ánh bởi các giá trị thuộc tính được hiển thị trên canvas. Đây chỉ là bước đầu tiên của chúng tôi để tích hợp âm thanh với canvas, nhưng nó sẽ cho bạn ý tưởng hay về cách chúng tôi sẽ bắt đầu sử dụng các phần tử
24 và thao tác chúng thông qua JavaScript
Hình 7-3 cho thấy ứng dụng này trông như thế nào khi được thực thi trong trình duyệt web
Hình 7-3. Hiển thị thuộc tính âm thanh trên canvas
Ngoài ra còn có một vài thuộc tính được hiển thị ở cuối danh sách này mà chúng ta chưa thảo luận. Tất cả đều đến từ các cuộc gọi đến chức năng
20 của
10
11. Chúng tôi hiện chỉ hiển thị những âm thanh này, nhưng trong Ví dụ 7-3, chúng tôi sẽ sử dụng chức năng này để giúp chúng tôi quyết định âm thanh nào sẽ tải động trong JavaScript
Ví dụ 7-3. Thuộc tính âm thanh và canvas
var audioType = supportedAudioFormat[audioElement];15
Ghi chú
Quy trình này được giải thích chi tiết trong Chương 6, trong đó chúng tôi đã cảnh báo rằng một số trình duyệt không kích hoạt sự kiện cho thẻ
var audioType = supportedAudioFormat[audioElement];7 được nhúng. Đó dường như không phải là trường hợp của
var audioType = supportedAudioFormat[audioElement];7, nhưng nó có thể xảy ra trong tương lai. Chúng tôi vẫn tin rằng cách tốt nhất để tải âm thanh và video là kỹ thuật được phát triển trong phần tiếp theo
Phát âm thanh không có thẻ âm thanh
Giờ đây, chúng tôi có âm thanh đang phát trong trang HTML5 và chúng tôi đang theo dõi các thuộc tính của phần tử
24 trên khung vẽ, đã đến lúc tăng cường tích hợp chúng. Bước tiếp theo là loại bỏ thẻ
var audioType = supportedAudioFormat[audioElement];7 được nhúng trong trang HTML
Nếu bạn còn nhớ từ Chương 6, chúng tôi đã tạo động phần tử
92 trong trang HTML, sau đó sử dụng phương thức
20 của đối tượng
var audioType = supportedAudioFormat[audioElement];410 để tìm ra loại tệp video sẽ tải cho một trình duyệt cụ thể. Chúng tôi sẽ làm một cái gì đó rất giống với âm thanh
Tự động tạo phần tử âm thanh trong JavaScript
Bước đầu tiên để tạo động các phần tử
24 là tạo một biến toàn cục có tên là
80. Biến này sẽ chứa một phiên bản của
var audioType = supportedAudioFormat[audioElement];6 mà chúng ta sẽ sử dụng trong ứng dụng canvas của mình. Nhớ lại rằng các phần tử
24 trong một trang HTML là các thể hiện của đối tượng DOM
var audioType = supportedAudioFormat[audioElement];6. Chúng tôi gọi chúng là đối tượng
24 khi được nhúng trong trang HTML và là phiên bản của
var audioType = supportedAudioFormat[audioElement];6 khi được tạo động trong JavaScript. Tuy nhiên về bản chất chúng giống nhau
Ghi chú
Đừng băn khoăn nếu bạn không thích sử dụng các biến toàn cục. Đến cuối chương này, chúng tôi sẽ chỉ cho bạn cách biến các biến này thành cục bộ cho ứng dụng canvas của bạn
Tiếp theo, chúng tôi tạo trình xử lý sự kiện cho sự kiện cửa sổ
var audioType = supportedAudioFormat[audioElement];418 có tên là
var audioType = supportedAudioFormat[audioElement];419
var audioType = supportedAudioFormat[audioElement];420. Bên trong hàm đó, chúng ta gọi hàm
var audioType = supportedAudioFormat[audioElement];421 của đối tượng DOM
var audioType = supportedAudioFormat[audioElement];422, truyền giá trị
24 làm kiểu phần tử cần tạo. Điều này sẽ tự động tạo một đối tượng
24 và đưa nó vào DOM. Bằng cách đặt đối tượng đó vào biến
80, sau đó chúng ta có thể tự động đặt nó vào trang HTML bằng cách gọi phương thức
var audioType = supportedAudioFormat[audioElement];426 của đối tượng DOM
var audioType = supportedAudioFormat[audioElement];427
var audioType = supportedAudioFormat[audioElement];40
Tuy nhiên, chỉ có một phần tử
24 được tạo động là không đủ. Chúng ta cũng cần đặt thuộc tính
00 của đối tượng
var audioType = supportedAudioFormat[audioElement];6 được đại diện bởi
80 thành tệp âm thanh hợp lệ để tải và phát. Nhưng vấn đề là chúng tôi chưa biết trình duyệt hiện tại hỗ trợ loại tệp âm thanh nào. Chúng tôi sẽ lấy thông tin đó từ một hàm mà chúng tôi sẽ tạo có tên là
var audioType = supportedAudioFormat[audioElement];432. Chúng tôi sẽ xác định chức năng này để nó trả về một giá trị chuỗi đại diện cho phần mở rộng của loại tệp mà chúng tôi muốn tải. Khi chúng tôi có phần mở rộng đó, chúng tôi nối nó với tên của âm thanh mà chúng tôi muốn tải và đặt
00 bằng một cuộc gọi đến phương thức
var audioType = supportedAudioFormat[audioElement];434 của đối tượng
var audioType = supportedAudioFormat[audioElement];6
var audioType = supportedAudioFormat[audioElement];
Nếu phần mở rộng hợp lệ từ
var audioType = supportedAudioFormat[audioElement];432 không được trả lại, thì đã xảy ra sự cố và chúng tôi cần tạm dừng thực thi. Để xử lý tình trạng này một cách đơn giản, chúng tôi tạo một thông báo
var audioType = supportedAudioFormat[audioElement];437 và sau đó là
var audioType = supportedAudioFormat[audioElement];438 từ hàm, tạm dừng thực thi một cách hiệu quả. Mặc dù đây không phải là một hình thức xử lý lỗi mạnh mẽ, nhưng nó sẽ hoạt động vì lợi ích của ví dụ này
0
Cuối cùng, giống như chúng tôi đã làm với video, chúng tôi sẽ lắng nghe sự kiện
65 của
24
11 để chúng tôi biết khi nào âm thanh đã sẵn sàng phát
1
Tìm định dạng âm thanh được hỗ trợ
Trước khi đoạn mã trong phần trước hoạt động, chúng ta cần xác định hàm
var audioType = supportedAudioFormat[audioElement];442
var audioType = supportedAudioFormat[audioElement];443. Vì chúng tôi đang thêm các đối tượng
24 một cách linh hoạt vào trang HTML, chúng tôi không có cách nào để xác định nhiều thẻ
var audioType = supportedAudioFormat[audioElement];7 như chúng tôi có thể làm trong HTML. Thay vào đó, chúng ta sẽ sử dụng phương thức
20 của đối tượng
24 để cho chúng ta biết loại tệp âm thanh nào sẽ tải. Chúng tôi đã giới thiệu cho bạn phương pháp
20 trong Chương 6, nhưng để bạn nhớ lại,
20 nhận một tham số duy nhất—một loại MIME. Nó trả về một chuỗi văn bản
21,
22 hoặc “” [không có gì]. Chúng tôi sẽ sử dụng các giá trị này để tìm ra loại phương tiện nào sẽ tải và phát. Giống như trong Chương 6, và vì mục đích của bài tập này, chúng ta sẽ giả định rằng cả
21 và
22 đều bằng với
var audioType = supportedAudioFormat[audioElement];454. Nếu chúng tôi gặp một trong hai kết quả với bất kỳ loại nào trong ba loại MIME của chúng tôi [âm thanh/ogg, âm thanh/wav, âm thanh/mp3], chúng tôi sẽ trả lại tiện ích mở rộng được liên kết với loại MIME đó để tệp âm thanh có thể được tải
Ghi chú
Chức năng tiếp theo về cơ bản giống như chức năng chúng ta đã tạo trong Chương 6 để xử lý các định dạng video. Những thay đổi rõ ràng ở đây là với các loại MIME cho âm thanh
Trong hàm bên dưới,
24 đại diện cho phiên bản của
var audioType = supportedAudioFormat[audioElement];6 mà chúng tôi sẽ kiểm tra. Biến
var audioType = supportedAudioFormat[audioElement];457 biểu thị phần mở rộng hợp lệ đó cho loại MIME đầu tiên được tìm thấy có giá trị là
21 hoặc
22 được trả về
2
Lưu ý rằng chúng tôi không kiểm tra điều kiện khi không tìm thấy định dạng âm thanh hợp lệ và giá trị trả về là
23. Nếu đúng như vậy, đoạn mã đã gọi hàm này có thể cần phải được viết theo cách nắm bắt điều kiện đó và thay đổi cách thực thi chương trình. Chúng tôi đã làm điều đó với việc kiểm tra giá trị
var audioType = supportedAudioFormat[audioElement];438 và thông báo
var audioType = supportedAudioFormat[audioElement];437 mà chúng tôi đã mô tả trong phần trước
Ghi chú
Nếu bạn muốn kiểm tra tình trạng lỗi không có giá trị
var audioType = supportedAudioFormat[audioElement];438 hợp lệ từ hàm này, chỉ cần thêm một ký tự phụ vào loại MIME [e. g. , audio/oggx] để đảm bảo luôn trả về một chuỗi rỗng
Ngoài ra, bạn có thể sử dụng Modernizr để kiểm tra hỗ trợ âm thanh. Nếu bạn đã đưa thư viện JavaScript Modernizr vào trang HTML của mình [như chúng tôi đã làm trong mọi ứng dụng mà chúng tôi đã viết cho đến nay], bạn có thể truy cập các giá trị tĩnh của Modernizr. âm thanh. ogg, Modernizr. âm thanh. wav và Modernizr. âm thanh. mp3 để kiểm tra xem các loại đó có hợp lệ không. Đây không phải là Booleans—chúng đánh giá theo cùng các giá trị
22,
21 và
23 mà chúng tôi nhận được từ lệnh gọi tới
20. Nếu bạn cảm thấy thoải mái khi sử dụng Modernizr cho tất cả các thử nghiệm của mình, bạn có thể thay thế thử nghiệm trong mã bằng thử nghiệm các giá trị tĩnh Modernizr này
Cuối cùng, chúng ta có thể phát âm thanh bên trong hàm
82 của mình. Vì chúng ta đã nạp sẵn âm thanh ban đầu bên ngoài ngữ cảnh của hàm này thành một biến có phạm vi toàn cục nên chúng ta chỉ cần gọi hàm
16 là
80 để bắt đầu phát âm thanh
3
Hình 7-4 cho thấy ứng dụng canvas này sẽ trông như thế nào khi được thực thi trong trình duyệt web tuân thủ HTML5 [lưu ý rằng chúng tôi đã để lại phần hiển thị thuộc tính âm thanh trong ứng dụng này]
Hình 7-4. Âm thanh được tải và phát “trên” canvas
Bây giờ, hãy xem toàn bộ ứng dụng trong Ví dụ 7-4. Lưu ý rằng không có thẻ
var audioType = supportedAudioFormat[audioElement];7 nào được xác định trong HTML, nhưng âm thanh vẫn phát. Đây là bước đầu tiên của chúng tôi để tích hợp các đối tượng
var audioType = supportedAudioFormat[audioElement];6 với HTML5 Canvas
Ví dụ 7-4. Phát âm thanh không có thẻ
4
Tạo Trình phát âm thanh Canvas
Bây giờ chúng ta có thể phát tệp âm thanh trực tiếp trong trang HTML bằng cách sử dụng thẻ
var audioType = supportedAudioFormat[audioElement];7 hoặc thông qua JavaScript bằng cách tạo một đối tượng động
var audioType = supportedAudioFormat[audioElement];6, đã đến lúc nâng cấp trò chơi của chúng ta. Chúng tôi sẽ tạo một trình phát âm thanh trên canvas mà chúng tôi có thể sử dụng để kiểm soát các tệp âm thanh được tải động. Tại sao chúng ta muốn làm điều này? . HTML5 Canvas cung cấp một cách để tạo một bộ điều khiển âm thanh động với hầu hết mọi giao diện mà bạn mong muốn
Tuy nhiên, sự linh hoạt này phải trả giá. HTML5 Canvas vốn không hỗ trợ các điều khiển GUI phổ biến như nút ấn, nút chuyển đổi và thanh trượt. Vì vậy, để tạo một trình phát âm thanh phù hợp, chúng ta cần tạo các loại điều khiển người dùng GUI này từ đầu. Chúng ta có thể tạo các điều khiển này bằng HTML và JavaScript, nhưng chúng ta đã nhiều lần đề cập đến giao tiếp giữa HTML và Canvas thông qua các điều khiển biểu mẫu trong cuốn sách này. Bạn đã muốn biết cách tạo ứng dụng HTML5 Canvas khi bạn bắt đầu đọc, vì vậy chúng tôi sẽ không thực hiện bất kỳ cú đấm nào trong chương này
Tạo Điều khiển người dùng tùy chỉnh trên Canvas
Đối với ứng dụng này, chúng tôi sẽ tạo bốn yếu tố
Phát/tạm dừng nút ấn
Tệp âm thanh đang phát hoặc bị tạm dừng. Cho dù nó hiện đang ở trạng thái nào, chúng tôi sẽ hiển thị nút khác [i. e. , hiển thị tạm dừng khi phát]
Thanh tiến trình trượtĐây là một thanh trượt không tương tác. Nó hiển thị lượng bản nhạc âm thanh đã phát và lượng còn lại để phát. Chuyển động của thanh này cần linh hoạt và dựa trên các thuộc tính
25 và
27 của đối tượng
var audioType = supportedAudioFormat[audioElement];6Thanh trượt âm lượng tương tác
Chúng tôi muốn tạo một điều khiển âm lượng trượt mà người dùng có thể thao tác bằng thao tác nhấp và kéo. Đây là điều khiển phức tạp nhất mà chúng tôi sẽ xây dựng vì Canvas không có hỗ trợ riêng cho thao tác nhấp và kéo
Một nút chuyển đổi vòng lặpĐây là một phần thưởng. Hầu hết các trình phát âm thanh HTML5 được nhúng mặc định không có nút chuyển đổi vòng lặp/không vòng lặp, nhưng chúng tôi sẽ thêm một nút. Hiện tại, chúng tôi đang vượt xa chức năng của HTML5 tiêu chuẩn
Hình 7-5 hiển thị các nút điều khiển âm thanh. hình ảnh png mà chúng tôi đã tạo. Nó chứa tất cả các hình ảnh chúng tôi sẽ sử dụng cho trình phát âm thanh. Hàng trên gồm
Trạng thái phát của nút phát/tạm dừng
Nền của thanh trượt phát
Thanh trượt di chuyển chúng tôi sẽ sử dụng cho thanh trượt phát và âm lượng
Hàng thứ hai gồm
Trạng thái tạm dừng của nút phát/tạm dừng
Nền của thanh trượt âm lượng
Trạng thái “tắt” của nút vòng lặp
Trạng thái “bật” của nút vòng lặp
Hình 7-5. điều khiển âm thanh. png
Đang tải tài sản nút
Vì chúng tôi sẽ tải cả tệp âm thanh và tệp hình ảnh cho ứng dụng này, nên chúng tôi cần sử dụng một chiến lược cho phép chúng tôi tải trước hai nội dung thay vì chỉ một. Quy trình này rất giống với quy trình chúng tôi đã sử dụng trong Chương 6 khi chúng tôi tạo các điều khiển cho video. Trước đó trong chương này, chúng tôi đã sử dụng một chức năng có tên là
24
var audioType = supportedAudioFormat[audioElement];420 để đảm bảo rằng âm thanh đã được tải trước khi chúng tôi bắt đầu sử dụng nó. Tuy nhiên, chiến lược đó sẽ không hoạt động khi chúng tôi có hai nội dung để tải. Chúng tôi có thể tạo hai trình lắng nghe sự kiện riêng biệt, nhưng nếu chúng tôi cần tải 3, 4 hoặc 10 nội dung thì sao?
Chúng tôi sẽ bắt đầu quá trình này bằng cách tạo một số biến có phạm vi toàn cầu cho tất cả các chức năng trong ứng dụng. Đầu tiên, ngoài tất cả các hàm JavaScript, chúng ta sẽ tạo ba biến mới—
var audioType = supportedAudioFormat[audioElement];480,
var audioType = supportedAudioFormat[audioElement];481 và
var audioType = supportedAudioFormat[audioElement];482
var audioType = supportedAudioFormat[audioElement];480
Biến này sẽ được sử dụng như một bộ đếm. Khi một nội dung đã được tải trước, chúng tôi sẽ tăng giá trị này
var audioType = supportedAudioFormat[audioElement];481
Đây là một giá trị số đại diện cho số lượng nội dung chúng ta cần tải trước khi có thể thực thi ứng dụng trong trang HTML
var audioType = supportedAudioFormat[audioElement];482
Biến này sẽ giữ một tham chiếu đến điều khiển âm thanh. png được hiển thị trong Hình 7-5. Chúng tôi sẽ sử dụng nó để tạo các điều khiển âm thanh của chúng tôi
Đây là mã với các giá trị được bao gồm
5
Ghi chú
Để đặt các biến này chỉ trong phạm vi ứng dụng Canvas chứ không phải trên phạm vi toàn cầu đối với tất cả JavaScript, bạn có thể gói gọn mã này trong một
var audioType = supportedAudioFormat[audioElement];486. Phiên bản cuối cùng của mã trong Ví dụ 7-6 cho thấy quy trình đó
Bên trong chức năng
var audioType = supportedAudioFormat[audioElement];487, bây giờ chúng ta cần đặt trình xử lý sự kiện để tải nội dung. Đối với
80, chúng tôi sẽ thay đổi trình xử lý từ
var audioType = supportedAudioFormat[audioElement];489 thành
var audioType = supportedAudioFormat[audioElement];490
6
Để tải và sử dụng điều khiển âm thanh. png, trước tiên chúng ta tạo một đối tượng
var audioType = supportedAudioFormat[audioElement];491 mới và đặt một tham chiếu đến nó vào biến
var audioType = supportedAudioFormat[audioElement];482. Tiếp theo, chúng tôi đặt thuộc tính
00 của đối tượng
var audioType = supportedAudioFormat[audioElement];494 mới cho tệp hình ảnh mà chúng tôi muốn tải—trong trường hợp này là điều khiển âm thanh. png. Sau đó, chúng tôi đặt trình xử lý sự kiện
var audioType = supportedAudioFormat[audioElement];495 của đối tượng
var audioType = supportedAudioFormat[audioElement];494 thành
var audioType = supportedAudioFormat[audioElement];490, đây là trình xử lý sự kiện tương tự mà chúng tôi đã sử dụng cho tệp âm thanh
7
Bây giờ chúng ta cần tạo trình xử lý sự kiện
var audioType = supportedAudioFormat[audioElement];498. Chức năng này khá đơn giản. Mỗi khi nó được gọi, chúng tôi tăng biến
var audioType = supportedAudioFormat[audioElement];480. Sau đó, chúng tôi kiểm tra
var audioType = supportedAudioFormat[audioElement];480 để xem liệu nó có bằng hoặc vượt quá số lượng mục mà chúng tôi muốn tải trước hay không, được biểu thị bằng biến
var audioType = supportedAudioFormat[audioElement];481. Nếu vậy, chúng tôi gọi hàm ________ 482 để bắt đầu ứng dụng của bạn
8
Thiết lập các giá trị của Trình phát âm thanh
Bên trong hàm
82, chúng ta cần tạo một số giá trị để giúp chúng ta đặt tất cả các nút và thanh trượt khác nhau trên canvas
First,
var audioType = supportedAudioFormat[audioElement];304 represents the height of all the controls;
var audioType = supportedAudioFormat[audioElement];305 represents the width of a standard button [play/pause, loop/not loop]
9
Tiếp theo, chúng tôi đặt chiều rộng của khu vực phát lại,
var audioType = supportedAudioFormat[audioElement];306 và chiều rộng của nền âm lượng,
var audioType = supportedAudioFormat[audioElement];307. Chúng tôi cũng đặt chiều rộng của thanh trượt [______8308] và chiều cao [
var audioType = supportedAudioFormat[audioElement];309]
var audioType = supportedAudioFormat[audioElement];40
Chúng tôi cũng cần một vài biến để đại diện cho các vị trí
var audioType = supportedAudioFormat[audioElement];310 và
var audioType = supportedAudioFormat[audioElement];311 trên canvas nơi chúng tôi sẽ bắt đầu xây dựng các điều khiển âm thanh của mình. Chúng tôi sẽ định nghĩa chúng là
var audioType = supportedAudioFormat[audioElement];312 và
var audioType = supportedAudioFormat[audioElement];313
var audioType = supportedAudioFormat[audioElement];41
Cuối cùng, chúng ta cần chỉ định các vị trí
var audioType = supportedAudioFormat[audioElement];310 và
var audioType = supportedAudioFormat[audioElement];311 cho nút phát/tạm dừng [
var audioType = supportedAudioFormat[audioElement];316,
var audioType = supportedAudioFormat[audioElement];317], nền thanh trượt phát
var audioType = supportedAudioFormat[audioElement];318,
var audioType = supportedAudioFormat[audioElement];319], nền thanh trượt âm lượng [
var audioType = supportedAudioFormat[audioElement];320,
var audioType = supportedAudioFormat[audioElement];321] và vị trí của vòng lặp/không
var audioType = supportedAudioFormat[audioElement];42
Chúng tôi sẽ sử dụng tất cả các giá trị này để giúp thiết kế và thêm chức năng cho các điều khiển âm thanh của chúng tôi. Việc tạo nhiều biến như vậy có vẻ như là quá mức cần thiết, nhưng khi cố gắng “cuộn” chức năng phát hiện va chạm và kéo và thả của riêng bạn vào khung vẽ, việc có các tên biến để thao tác thay vì các chữ cái giúp công việc dễ dàng hơn nhiều
Since we are going to create our own functions for interactivity between the mouse and our custom canvas audio controls, we need to add some event handlers for certain common mouse events
First, we need to create a couple variables—
var audioType = supportedAudioFormat[audioElement];324 and
var audioType = supportedAudioFormat[audioElement];325—that will hold the current
var audioType = supportedAudioFormat[audioElement];310 and
var audioType = supportedAudioFormat[audioElement];311 locations of the mouse pointer
var audioType = supportedAudioFormat[audioElement];43
Next, we need to create the event handlers. First, we listen for the
var audioType = supportedAudioFormat[audioElement];328 event. This event fires when a user stops pressing the mouse button. We will listen for this event when we are trying to determine whether we should stop dragging the volume slider
var audioType = supportedAudioFormat[audioElement];44
We also need to listen for the
var audioType = supportedAudioFormat[audioElement];329 event to determine whether the play/pause button was pressed, the loop on/off toggle button was pressed, and/or the volume slider was clicked so we can start dragging it
var audioType = supportedAudioFormat[audioElement];45
Finally, we listen for
var audioType = supportedAudioFormat[audioElement];330 so we can figure out the current
var audioType = supportedAudioFormat[audioElement];310 and
var audioType = supportedAudioFormat[audioElement];311 locations of the mouse pointer. We use this value to determine whether buttons have been pressed, as well as whether the volume slider has been clicked and/or dragged
var audioType = supportedAudioFormat[audioElement];46
The sliding play indicator is the simplest control we are going to draw onto the canvas. It is not interactive—it just gives the user a visual indication of how much of the audio clip is left to play
First of all, in
82 we need to make sure that we call the
98 function on an interval, so our updated controls will be displayed
var audioType = supportedAudioFormat[audioElement];47
Ghi chú
Unlike when displaying video on the canvas, we do not have to call
98 to update the playing audio. In JavaScript, audio plays completely separate from the canvas. Our need to call
98 on an interval is necessary because the audio controls we are creating need to be updated as the audio plays
In the
98 function we need to draw the slider and background on the canvas. We are going to “cut” all the images we display from the single
var audioType = supportedAudioFormat[audioElement];482 image we loaded from audiocontrols. png. To draw the background, we use the values we set up earlier. We use literals [i. e. ,
var audioType = supportedAudioFormat[audioElement];339] to locate the starting point of the image because those values do not change on the
var audioType = supportedAudioFormat[audioElement];482 image. However, we use the variables we created to find the width and height, and to locate the final position of the background on the canvas
var audioType = supportedAudioFormat[audioElement];48
Drawing the play slider is only a bit more complicated. Before we draw it, we need to create a variable that represents the relationship between the length of playing audio and the width of slider area. This is so we will know how far on the x-axis to move the slider based on how much of the song has played. This may sound complicated, but it’s just a simple fraction. Divide the width of the play background [
var audioType = supportedAudioFormat[audioElement];306] by the duration of the playing audio [
var audioType = supportedAudioFormat[audioElement];342]. We will store that ratio in
var audioType = supportedAudioFormat[audioElement];343 and use it to place the play slider on the canvas
var audioType = supportedAudioFormat[audioElement];49
Now we need to calculate the
var audioType = supportedAudioFormat[audioElement];310 position of the slider. The
var audioType = supportedAudioFormat[audioElement];310 position is the sum of the slider’s starting position [the place on the canvas where the controls start plus the width of the play/pause button.
var audioType = supportedAudioFormat[audioElement];346] plus the audio’s current play position. We calculate the play position by taking the ratio we just created,
var audioType = supportedAudioFormat[audioElement];343, and multiplying it by the current play time of the audio clip [
var audioType = supportedAudioFormat[audioElement];348]. That’s it
var audioType = supportedAudioFormat[audioElement];30
Now all we need to do is draw the image onto the canvas, and then test to see whether the audio clip has ended. If it has ended, we put the play position back to the beginning of the playback area and call
var audioType = supportedAudioFormat[audioElement];349 to pause the audio clip. That is, unless the
06 property is sent, in which case we start playing the audio clip from the beginning by setting the
27 property to
48
var audioType = supportedAudioFormat[audioElement];31
Điều này dẫn chúng ta đến ngay chủ đề tiếp theo, xử lý nút phát/tạm dừng
Phát/Tạm Dừng Nút Nhấn. Lần truy cập điểm kiểm tra được xem lại
Điều đầu tiên chúng ta cần làm khi triển khai nút phát/tạm dừng là tạo trình xử lý sự kiện cho sự kiện
var audioType = supportedAudioFormat[audioElement];330. Chức năng thực sự chỉ là mã trình duyệt chéo tiêu chuẩn mà chúng tôi đã giới thiệu trước đó trong cuốn sách để theo dõi vị trí của chuột, tùy thuộc vào thuộc tính nào mà DOM trong trình duyệt hỗ trợ.
var audioType = supportedAudioFormat[audioElement];354/
var audioType = supportedAudioFormat[audioElement];355 hoặc
var audioType = supportedAudioFormat[audioElement];356/
var audioType = supportedAudioFormat[audioElement];357. Hàm này được gọi mỗi khi di chuyển chuột trên canvas để cập nhật các biến
var audioType = supportedAudioFormat[audioElement];324 và
var audioType = supportedAudioFormat[audioElement];325. Các biến đó được đặt trong phạm vi
82 để tất cả các hàm được xác định bên trong nó có thể truy cập chúng
var audioType = supportedAudioFormat[audioElement];32
Bây giờ chúng ta cần tạo hàm xử lý
var audioType = supportedAudioFormat[audioElement];361. Chức năng này được gọi khi người dùng nhả nút chuột sau khi nhấp. Tại sao sau và không phải khi nhấp chuột?
Trọng tâm của chức năng này là kiểm tra phát hiện va chạm kiểu điểm kiểm tra đối với các nút. Chúng ta đã thảo luận sâu về vấn đề này trong Chương 6 khi tạo các nút cho trò chơi giải đố dạng video [CH6EX10. html]. Lưu ý rằng ở đây chúng tôi đang sử dụng các biến mà chúng tôi tạo để biểu thị các vị trí của nút
var audioType = supportedAudioFormat[audioElement];310 và
var audioType = supportedAudioFormat[audioElement];311 [
var audioType = supportedAudioFormat[audioElement];316,
var audioType = supportedAudioFormat[audioElement];317] cũng như chiều rộng và chiều cao của nút [
var audioType = supportedAudioFormat[audioElement];305,
var audioType = supportedAudioFormat[audioElement];304] để tạo thành các giới hạn của khu vực chúng tôi sẽ kiểm tra. Nếu con trỏ chuột nằm trong các giới hạn đó, chúng tôi biết nút đã được nhấp
var audioType = supportedAudioFormat[audioElement];33
Ghi chú
Nếu bạn có các hình ảnh xếp chồng lên nhau, bạn sẽ cần lưu trữ một số loại giá trị xếp chồng hoặc chỉ mục z để biết mục nào ở trên cùng và được nhấp vào bất kỳ lúc nào. Bởi vì khung vẽ hoạt động ở chế độ ngay lập tức, bạn sẽ phải “tự cuộn” giống như các chức năng khác mà chúng ta đã thảo luận
Sau khi một lần truy cập được phát hiện, chúng ta cần xác định xem chúng ta sẽ gọi phương thức
16 hay
19 của đối tượng
var audioType = supportedAudioFormat[audioElement];6 được đại diện bởi biến
80. Để biết nên gọi phương thức nào, chúng ta chỉ cần kiểm tra xem âm thanh có bị tạm dừng hay không bằng cách kiểm tra thuộc tính
var audioType = supportedAudioFormat[audioElement];373. Nếu vậy, chúng ta gọi phương thức
16; . Nhớ lại rằng thuộc tính
var audioType = supportedAudioFormat[audioElement];376 được đặt thành
29 nếu âm thanh không phát, bất kể hàm
var audioType = supportedAudioFormat[audioElement];378 có được gọi hay không. Điều này có nghĩa là khi ứng dụng bắt đầu nhưng chúng tôi chưa đặt
05, chúng tôi có thể dễ dàng hiển thị nút thích hợp [phát hoặc tạm dừng] chỉ bằng cách kiểm tra thuộc tính này
var audioType = supportedAudioFormat[audioElement];34
Bây giờ, trong
98, chúng ta cần chọn nút nào sẽ hiển thị. cái đại diện cho phát [hình tam giác màu xanh lá cây] hoặc tạm dừng [hai ô nằm ngang]. Nút phát được hiển thị khi âm thanh bị tạm dừng và nút tạm dừng được hiển thị khi âm thanh đang phát. Nút này là một “kêu gọi hành động”, vì vậy nó hiển thị điều gì sẽ xảy ra khi bạn nhấp vào nó, chứ không phải trạng thái của thành phần âm thanh đang phát. Mối quan hệ nghịch đảo này tồn tại bởi vì nó là cách thức hoạt động tiêu chuẩn của trình phát âm thanh
Nếu
80 bị tạm dừng, chúng tôi sẽ hiển thị đồ họa từ hàng trên cùng của điều khiển âm thanh. png được đại diện bởi
var audioType = supportedAudioFormat[audioElement];482 [xem Hình 7-5]. Nếu nó không bị tạm dừng, chúng tôi sẽ hiển thị nút trên hàng thứ hai ngay bên dưới nó. Vì nút đó bắt đầu ở vị trí
var audioType = supportedAudioFormat[audioElement];311 của
var audioType = supportedAudioFormat[audioElement];384, nên chúng tôi sử dụng giá trị bằng chữ đó trong lệnh gọi tới
var audioType = supportedAudioFormat[audioElement];385
var audioType = supportedAudioFormat[audioElement];35
Ghi chú
Một lần nữa, chúng tôi có thể biểu thị các giá trị theo nghĩa đen của các vị trí trong
var audioType = supportedAudioFormat[audioElement];482 bằng các biến, nhưng chúng tôi đã quyết định sử dụng theo nghĩa đen để cho bạn thấy sự khác biệt giữa cách chúng tôi chỉ định các vị trí pixel của
var audioType = supportedAudioFormat[audioElement];482 và cách chúng tôi tính toán chiều rộng và khoảng cách để đặt các phần tử đó
Nút chuyển đổi vòng lặp/không vòng lặp
Việc triển khai nút chuyển đổi vòng lặp/không vòng lặp gần giống với việc triển khai nút phát/tạm dừng. Trong Hình 7-5, bạn có thể thấy rằng hai nút cuối cùng ở hàng dưới cùng biểu thị trạng thái “bật” và “tắt” của nút vòng lặp/không vòng lặp. Không giống như nút phát/tạm dừng, nút này hiển thị “trạng thái” của vòng lặp. nút “ra” sáng hơn, trông 3D được hiển thị khi âm thanh không được đặt thành vòng lặp. Nút đảo ngược, tối hơn được hiển thị khi âm thanh được đặt thành vòng lặp [vì có vẻ như nút này đã được nhấn]
Trong hàm
var audioType = supportedAudioFormat[audioElement];361, chúng ta cần thêm hỗ trợ cho loop/no loop. Đầu tiên, chúng tôi kiểm tra điểm kiểm tra nhấn trên nút với vị trí hiện tại của con trỏ chuột. Điều này giống hệt với thử nghiệm mà chúng tôi đã thực hiện đối với nút phát/tạm dừng, ngoại trừ việc chúng tôi sử dụng
var audioType = supportedAudioFormat[audioElement];322 và
var audioType = supportedAudioFormat[audioElement];323 để tìm vị trí hiện tại của nút lặp/không lặp
Tiếp theo, chúng tôi kiểm tra giá trị của
var audioType = supportedAudioFormat[audioElement];391. Chúng ta cần cập nhật giá trị ngược lại với cài đặt hiện tại. Nếu
06 là
29, chúng tôi đặt nó thành
30;
var audioType = supportedAudioFormat[audioElement];36
Cuối cùng, trong
98, chúng tôi sẽ hiển thị phần thích hợp của hình ảnh
var audioType = supportedAudioFormat[audioElement];482 cho bất kỳ trạng thái vòng lặp/không vòng lặp nào hiện được đặt. Không giống như phát/tạm dừng, chúng tôi hiển thị trạng thái “tắt” khi
06 là
30 và trạng thái “bật” khi nó được đặt thành
29 bởi vì, một lần nữa, không có mối quan hệ nghịch đảo với các trạng thái của nút
var audioType = supportedAudioFormat[audioElement];37
Thanh trượt âm lượng nhấp và kéo
Vì vậy, bây giờ chúng tôi đã hoàn thành chức năng cuối cùng nhưng chắc chắn không kém phần quan trọng cho trình phát âm thanh. thanh trượt âm lượng. Thanh trượt âm lượng là một điều khiển tương tác cho phép người dùng thao tác bằng cách trượt sang phải hoặc trái để điều khiển âm lượng của phần tử âm thanh đang phát. Trước khi tạo thanh trượt âm lượng, chúng ta cần xác định một số ranh giới cho việc sử dụng nó
Thanh trượt không bao giờ di chuyển trên trục y;
Thanh trượt âm lượng càng xa về bên phải [giá trị
var audioType = supportedAudioFormat[audioElement];
310 càng lớn] thì âm lượng càng caoThanh trượt di chuyển trên trục x nhưng được giới hạn bởi giá trị
var audioType = supportedAudioFormat[audioElement];
310 bắt đầu của hình ảnh thanh trượt âm lượng—var audioType = supportedAudioFormat[audioElement];
905 ở bên trái vàvar audioType = supportedAudioFormat[audioElement];
906 ở bên phảiKhi người dùng nhấp vào thanh trượt âm lượng, chúng tôi sẽ cho rằng người dùng muốn đặt âm lượng, vì vậy chúng tôi sẽ bắt đầu "kéo" thanh trượt. Điều này có nghĩa là nếu người dùng di chuyển chuột trên trục x, chúng tôi sẽ di chuyển thanh trượt theo đó
Khi người dùng bỏ ngón tay khỏi nút chuột, chúng tôi sẽ cho rằng anh ấy không muốn đặt âm lượng nữa và chúng tôi vẫn dừng "kéo" thanh trượt
Âm lượng sẽ được đặt dựa trên vị trí của thanh trượt trên trục x so với
var audioType = supportedAudioFormat[audioElement];
905 cộng với tỷ lệ [var audioType = supportedAudioFormat[audioElement];
908] mà chúng tôi tạo ra để mô tả mức tăng hoặc giảm âm lượng dựa trên vị trí của thanh trượt
OK, bây giờ chúng tôi đã hoàn toàn làm bạn bối rối, hãy nói sâu về quy trình. Đầu tiên, chúng ta bắt đầu với hàm
82. Trong
82, chúng tôi cần thiết lập một số biến để đặt các quy tắc mà chúng tôi đã xác định trong danh sách trên
Vị trí bắt đầu của
var audioType = supportedAudioFormat[audioElement];310 cho thanh trượt âm lượng là
var audioType = supportedAudioFormat[audioElement];905. Khi ứng dụng bắt đầu, nó bằng với vị trí của khối lượng nền ____ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _. Điều này có nghĩa là nó sẽ bắt đầu ở cạnh ngoài cùng bên trái của thanh trượt âm lượng trong đó
41 sẽ được đặt thành
48. Chúng tôi sẽ cập nhật giá trị này vào vị trí chính xác dựa trên
41 ngay sau khi chúng tôi tính toán giá trị đó
var audioType = supportedAudioFormat[audioElement];38
Vị trí cuối cùng của
var audioType = supportedAudioFormat[audioElement];310 cho thanh trượt âm lượng là
var audioType = supportedAudioFormat[audioElement];906, là vị trí ngoài cùng bên phải. Đó là vị trí mà âm lượng sẽ được đặt thành 100% [hoặc
49]. Vị trí này nằm ở vị trí
var audioType = supportedAudioFormat[audioElement];310 của
var audioType = supportedAudioFormat[audioElement];905 cộng với chiều rộng của nền thanh trượt âm lượng [
var audioType = supportedAudioFormat[audioElement];307], trừ đi chiều rộng của chính thanh trượt âm lượng [
var audioType = supportedAudioFormat[audioElement];308]
var audioType = supportedAudioFormat[audioElement];39
var audioType = supportedAudioFormat[audioElement];925 và
var audioType = supportedAudioFormat[audioElement];926 là các vị trí của thanh trượt
var audioType = supportedAudioFormat[audioElement];310 và
var audioType = supportedAudioFormat[audioElement];311 trên canvas. Vị trí của
var audioType = supportedAudioFormat[audioElement];311 cũng giống như các phần tử khác trong trình phát âm thanh,
var audioType = supportedAudioFormat[audioElement];313. Tuy nhiên, vị trí của
var audioType = supportedAudioFormat[audioElement];310 được tính theo một cách hoàn toàn khác. Trước tiên, chúng tôi lấy giá trị của
var audioType = supportedAudioFormat[audioElement];905 và thêm sự khác biệt giữa chiều rộng nền âm lượng thanh trượt và chiều rộng thanh trượt [
var audioType = supportedAudioFormat[audioElement];933], nhân với thuộc tính
41 của
80, là một số nằm trong khoảng từ
48 đến
49. Điều này sẽ cung cấp cho chúng tôi vị trí tương ứng với điểm bắt đầu mà từ đó chúng tôi muốn vẽ thanh trượt âm lượng cho bất kỳ cài đặt âm lượng nào
var audioType = supportedAudioFormat[audioElement];90
Tiếp theo, chúng tôi tạo biến
var audioType = supportedAudioFormat[audioElement];938 mà chúng tôi sẽ sử dụng làm công tắc để cho chúng tôi biết liệu thanh trượt âm lượng có đang được người dùng kéo vào bất kỳ thời điểm nào hay không
var audioType = supportedAudioFormat[audioElement];91
Cuối cùng, chúng ta tạo biến
var audioType = supportedAudioFormat[audioElement];908. Biến này cho chúng tôi biết khối lượng tăng hoặc giảm trên thuộc tính
var audioType = supportedAudioFormat[audioElement];940 dựa trên vị trí của thanh trượt trên nền âm lượng. Vì giá trị tối đa của âm lượng là
49, nên chúng ta chỉ cần tìm tổng chiều rộng mà thanh trượt âm lượng có thể di chuyển trên trục x [
var audioType = supportedAudioFormat[audioElement];942] và chia
49 cho giá trị đó. Điều này sẽ cung cấp cho chúng tôi một sản phẩm mà chúng tôi có thể nhân với vị trí
var audioType = supportedAudioFormat[audioElement];310 của thanh trượt, so với
var audioType = supportedAudioFormat[audioElement];905, để cung cấp cho chúng tôi âm lượng mà chúng tôi nên đặt cho
80
var audioType = supportedAudioFormat[audioElement];92
Chức năng thanh trượt âm lượng
Bây giờ chúng ta đã thảo luận về các biến chúng ta cần cho thanh trượt âm lượng, chúng ta sẽ nói về cách chúng ta sử dụng chúng trong các chức năng khác nhau của trình phát âm thanh. Tin tốt là việc triển khai rất đơn giản khi bạn đã biết các biến hoạt động như thế nào
Trong trình xử lý
var audioType = supportedAudioFormat[audioElement];947, chúng tôi thực hiện kiểm tra kiểu điểm kiểm tra lần nhấn, giống như chúng tôi đã làm với các nút phát/tạm dừng và lặp/không lặp để xem liệu thanh trượt âm lượng có được bấm hay không. Nếu vậy, chúng tôi đặt biến
var audioType = supportedAudioFormat[audioElement];938 thành
29. Điều này có nghĩa là thanh trượt âm lượng bây giờ sẽ di chuyển đến vị trí
var audioType = supportedAudioFormat[audioElement];310 của chuột khi chúng ta gọi
98
var audioType = supportedAudioFormat[audioElement];93
In the
var audioType = supportedAudioFormat[audioElement];361 handler, we test to see whether the
var audioType = supportedAudioFormat[audioElement];938 is set to
29. Nếu vậy có nghĩa là người dùng đã thả chuột và không muốn kéo thanh trượt âm lượng nữa. Chúng tôi đặt
var audioType = supportedAudioFormat[audioElement];938 thành
30 để thanh trượt không di chuyển bằng chuột
var audioType = supportedAudioFormat[audioElement];94
Trong
98, chúng tôi thực sự đặt các pixel vào canvas, có thể nói như vậy, với thanh trượt âm lượng. Đầu tiên, chúng tôi vẽ hình nền từ
var audioType = supportedAudioFormat[audioElement];482
var audioType = supportedAudioFormat[audioElement];95
Tiếp theo, chúng tôi kiểm tra xem liệu
var audioType = supportedAudioFormat[audioElement];938 có phải là
29 hay không. Nếu vậy, chúng tôi tạo biến
41____8962 bằng với vị trí
var audioType = supportedAudioFormat[audioElement];310 của chuột. Sau đó, chúng tôi thực hiện thêm một vài thử nghiệm để xác định xem vị trí
var audioType = supportedAudioFormat[audioElement];310 của thanh trượt âm lượng có nằm ngoài giới hạn của nền âm lượng hay không. Hai thử nghiệm này đảm bảo rằng thanh trượt âm lượng không di chuyển qua các cạnh ngoài cùng bên phải hoặc bên trái của nền thanh trượt âm lượng và do đó, thuộc tính
41 của
80 không được tính là lớn hơn
49 hoặc nhỏ hơn
48
var audioType = supportedAudioFormat[audioElement];96
Nếu
var audioType = supportedAudioFormat[audioElement];938 là
30, chúng tôi vẫn cần một vị trí
var audioType = supportedAudioFormat[audioElement];310 để vẽ đồ họa thanh trượt. Chúng tôi nhận được điều này giống như cách chúng tôi tính toán
var audioType = supportedAudioFormat[audioElement];925 khi chúng tôi khởi tạo biến trong hàm
82
var audioType = supportedAudioFormat[audioElement];97
Finally, we draw the slider onto the canvas
var audioType = supportedAudioFormat[audioElement];98
Hình 7-6 hiển thị các điều khiển tùy chỉnh trong trình duyệt
Hình 7-6. Trình phát âm thanh canvas với các điều khiển tùy chỉnh
So there you have it. Bạn có thể kiểm tra trình phát âm thanh như CH7EX5. html in the source code. The full code listing for the HTML5 Canvas audio player is shown in Example 7-5
Ví dụ 7-5. Trình phát âm thanh tùy chỉnh trên canvas
var audioType = supportedAudioFormat[audioElement];99
Nghiên cứu điển hình về âm thanh. Trò chơi cướp không gian
Nếu chúng tôi đang viết một cuốn sách về HTML5 tiêu chuẩn, chúng tôi có thể dừng ở đây và tiếp tục với một chủ đề khác. However, there is a lot more to playing audio in an application than simply getting a song to play and tracking its progress. Trong phần cuối của chương này, chúng ta sẽ xem xét một trường hợp nghiên cứu. Space Raiders. Chúng tôi sẽ lặp lại một số ý tưởng và nỗ lực để âm thanh hoạt động một cách hiệu quả kết hợp với hành động trên HTML5 Canvas
Tại sao âm thanh trong các ứng dụng khác nhau. âm thanh sự kiện
Why make a game as an example for playing sounds in HTML5? Well, a game is a perfect example because it is difficult to predict how many sounds might be playing at any one time
If you can imagine, games are some of the most demanding applications when it comes to sound. In most games, sounds are played based on user interactions, and those interactions are usually both asynchronous and unpredictable. Vì những yếu tố đó, chúng ta cần tạo ra một chiến lược phát âm thanh linh hoạt và tiết kiệm tài nguyên
To demonstrate how tricky sounds can be when using JavaScript and HTML5 with a canvas game, we will iterate this game several times until we have a working model
Dưới đây là một số giả định mà chúng tôi sẽ đưa ra về âm thanh trong Space Raiders dựa trên những gì chúng tôi biết về đối tượng HTML5
24
Sau khi tải âm thanh, bạn có thể tạo một đối tượng khác có cùng nguồn và “tải” nó mà không cần phải đợi tải. [Loại flash hoạt động theo cách này. ]
Phát âm thanh cục bộ cũng giống như phát chúng trên một trang web được lưu trữ từ xa
Hóa ra cả hai giả định này đều sai. As we continue through this case study, we will show you why, as well as how to accommodate them
Since this is not a chapter about making games, Space Raiders is only going to be a façade. Ở Hollywood, mặt tiền là một cấu trúc được xây dựng để quay phim, chỉ chứa những phần mà máy quay sẽ nhìn thấy. Ví dụ, mặt tiền của một tòa nhà có thể chỉ có bức tường phía trước và các cửa sổ mà không có gì phía sau chúng. Space Raiders giống như thế này bởi vì chúng tôi sẽ chỉ tạo những phần cần thiết để bao gồm âm thanh động mà chúng tôi sẽ sử dụng. It will be most of a game, leading you into Chapters 8 and 9, which take a deep dive into making complete games with HTML5 Canvas
Trong trường hợp nghiên cứu này, chúng tôi sẽ tạo bốn lần lặp lại của Space Raiders. Each one will attempt to solve a dynamic audio problem in a different way. Trước tiên, chúng tôi sẽ chỉ cho bạn những điều cơ bản về cấu trúc trò chơi Space Raiders, sau đó chúng tôi sẽ thảo luận cách giải quyết vấn đề âm thanh
Cấu trúc trò chơi Space Raiders
Space Raiders is an iconic action game where a swarm of alien invaders attack from the top of the screen, and the player’s job is to defend the world. The raiders move in horizontal lines near the top of the screen. When each raider reaches the side of the playfield, it moves down the screen and then switches direction
The player controls a spaceship by moving the mouse, and fires missiles using the left mouse button. Chúng ta cần phát âm thanh “bắn” mỗi khi người chơi bắn tên lửa. When the missiles hit the enemy space raiders, we need to remove them from the screen, and then play an “explosion” sound. Chúng tôi không giới hạn số lần bắn mà người chơi có thể bắn, điều đó có nghĩa là có thể có bất kỳ số lượng âm thanh bắn và phát nổ nào phát đồng thời. Mục tiêu của chúng tôi là quản lý tất cả những âm thanh động này
Trò chơi này chạy bằng một máy trạng thái rất đơn giản. Máy trạng thái là một cấu trúc cho phép một ứng dụng chỉ tồn tại ở một trạng thái tại một thời điểm, có nghĩa là nó chỉ thực hiện một việc. Loại cấu trúc này rất phù hợp cho các trò chơi một người chơi vì nó loại bỏ nhu cầu giữ một loạt các Boolean mô tả những gì đang diễn ra tại bất kỳ thời điểm nào.
Space Raiders has four states plus a variable named
var audioType = supportedAudioFormat[audioElement];975 that holds the value of the current state. Those states include
var audioType = supportedAudioFormat[audioElement];976
Một trạng thái để thiết lập tải tài sản
var audioType = supportedAudioFormat[audioElement];80____8977
A wait state that has the application sleep until all assets have been loaded
var audioType = supportedAudioFormat[audioElement];81
var audioType = supportedAudioFormat[audioElement];978
Một trạng thái để thiết lập các giá trị trò chơi ban đầu
var audioType = supportedAudioFormat[audioElement];82____8979
Một trạng thái xử lý tất cả logic chơi trò chơi
var audioType = supportedAudioFormat[audioElement];83
Ghi chú
Trò chơi cuối cùng thuộc loại này có thể có thêm một vài trạng thái, chẳng hạn như
var audioType = supportedAudioFormat[audioElement];980 và
var audioType = supportedAudioFormat[audioElement];981, nhưng nghiên cứu điển hình của chúng tôi không yêu cầu chúng
Trái tim của cỗ máy trạng thái của chúng tôi là hàm
var audioType = supportedAudioFormat[audioElement];982, được gọi trong khoảng thời gian cứ sau 33 mili giây. The
var audioType = supportedAudioFormat[audioElement];975 variable determines what function to call at any given time using a
var audioType = supportedAudioFormat[audioElement];984 statement.
var audioType = supportedAudioFormat[audioElement];975 được cập nhật sang trạng thái khác bất cứ khi nào chương trình sẵn sàng tiếp tục và làm việc khác. Quá trình gọi một hàm chẳng hạn như
var audioType = supportedAudioFormat[audioElement];982 trên một khoảng thời gian và chuyển đổi trạng thái thường được gọi là vòng lặp trò chơi
var audioType = supportedAudioFormat[audioElement];84
Initializing the game. no global variables
Now that we know a bit about the state machine construct we will use for this game, it’s time to set up the preload for our assets. As we mentioned previously, this game has two sounds, shoot and explode, but it also has three images. một người chơi, một người ngoài hành tinh và một tên lửa
Hãy nhớ cách chúng tôi liên tục nói rằng chúng tôi sẽ loại bỏ các biến toàn cầu trong các ứng dụng này? . Với máy trạng thái, giờ đây chúng ta có một cơ chế cho phép ứng dụng của mình chờ tải nội dung thay vì chỉ tận dụng sự kiện
var audioType = supportedAudioFormat[audioElement];418 của cửa sổ DOM
Trong hàm
82, chúng tôi thiết lập các biến sau để sử dụng trong trò chơi
The
var audioType = supportedAudioFormat[audioElement];975 variable holds the current state constant
var audioType = supportedAudioFormat[audioElement];85
We use the
var audioType = supportedAudioFormat[audioElement];480 and
var audioType = supportedAudioFormat[audioElement];481 variables in exactly the same way we used them in the audio player application—except here we will be loading more items
var audioType = supportedAudioFormat[audioElement];86
The variables
var audioType = supportedAudioFormat[audioElement];992,
var audioType = supportedAudioFormat[audioElement];993, and
var audioType = supportedAudioFormat[audioElement];994 will hold the loaded images we use in the game
var audioType = supportedAudioFormat[audioElement];87
var audioType = supportedAudioFormat[audioElement];995 and
var audioType = supportedAudioFormat[audioElement];996 will hold the references to the
var audioType = supportedAudioFormat[audioElement];6 objects we will load
var audioType = supportedAudioFormat[audioElement];88
The
var audioType = supportedAudioFormat[audioElement];998 variable will hold the extension of the valid audio file type for the browser displaying the application
var audioType = supportedAudioFormat[audioElement];89
The
var audioType = supportedAudioFormat[audioElement];324 and
var audioType = supportedAudioFormat[audioElement];325 variables will hold the current
var audioType = supportedAudioFormat[audioElement];310 and
var audioType = supportedAudioFormat[audioElement];311 location of the mouse
var audioType = supportedAudioFormat[audioElement];43
The
var audioType = supportedAudioFormat[audioElement];803 variable will hold a dynamic object with the
var audioType = supportedAudioFormat[audioElement];310 and
var audioType = supportedAudioFormat[audioElement];311 location of the player ship [controlled with the mouse]
var audioType = supportedAudioFormat[audioElement];101
Both the
var audioType = supportedAudioFormat[audioElement];806 and
var audioType = supportedAudioFormat[audioElement];807 arrays will hold lists of dynamic objects for displaying aliens and missiles on the canvas
var audioType = supportedAudioFormat[audioElement];102
Năm hằng số tiếp theo đặt số lượng người ngoài hành tinh [_______9808,
var audioType = supportedAudioFormat[audioElement];809], vị trí xuất phát của họ [
var audioType = supportedAudioFormat[audioElement];810,
var audioType = supportedAudioFormat[audioElement];811] và khoảng cách của họ trên màn hình [
var audioType = supportedAudioFormat[audioElement];812]
var audioType = supportedAudioFormat[audioElement];103
Also in the
82 function, we need to set up event handlers for
var audioType = supportedAudioFormat[audioElement];328 and
var audioType = supportedAudioFormat[audioElement];330. To create the game loop, we need to set up our interval to call the
var audioType = supportedAudioFormat[audioElement];982 function
var audioType = supportedAudioFormat[audioElement];104
At this point,
var audioType = supportedAudioFormat[audioElement];982 will be called and our game loop will start by calling the function associated with the value of
var audioType = supportedAudioFormat[audioElement];975
Preloading all assets without global variables
We just showed that the
var audioType = supportedAudioFormat[audioElement];975 variable was initialized to
var audioType = supportedAudioFormat[audioElement];976, which means that when the
var audioType = supportedAudioFormat[audioElement];982 function is called for the first time, the
var audioType = supportedAudioFormat[audioElement];822 function will be called. The good news [at least for this discussion] is that
var audioType = supportedAudioFormat[audioElement];822 does very little that we have not already seen—it just does it in the context of the Canvas application. The result? Now we don’t need any global variables
In the code below, notice that we are using the same strategy. We have a single event handler for all loaded assets [
var audioType = supportedAudioFormat[audioElement];498],we set
var audioType = supportedAudioFormat[audioElement];481 to
var audioType = supportedAudioFormat[audioElement];826 [three graphics and two sounds], and we set the
var audioType = supportedAudioFormat[audioElement];975 to
var audioType = supportedAudioFormat[audioElement];977 at the end of the function. The rest of the code is all simple review
var audioType = supportedAudioFormat[audioElement];105
Nếu bạn nhớ lại,
var audioType = supportedAudioFormat[audioElement];977 không làm gì trong chức năng
var audioType = supportedAudioFormat[audioElement];982 của chúng tôi; . Hành động ở đây được xử lý bởi trình xử lý sự kiện
var audioType = supportedAudioFormat[audioElement];498, hoạt động chính xác như hàm
var audioType = supportedAudioFormat[audioElement];498 mà chúng tôi đã viết cho trình phát âm thanh, ngoại trừ việc nó có thêm hai hàm
Nó phải xóa các trình lắng nghe sự kiện khỏi hai đối tượng
var audioType = supportedAudioFormat[audioElement];
833 mà chúng ta đã tạo. Điều này là do, trong một số trình duyệt, việc gọi phương thức
16 của đối tượngvar audioType = supportedAudioFormat[audioElement];
6—hoặc thay đổi thuộc tính
00 của đối tượngvar audioType = supportedAudioFormat[audioElement];
6—bắt đầu hoạt độngvar audioType = supportedAudioFormat[audioElement];
418, sau đó thao tác này sẽ gọi trình xử lý sự kiệnvar audioType = supportedAudioFormat[audioElement];
490 lần thứ hai. Điều này sẽ gây ra kết quả không mong muốn trong ứng dụng của bạn. Hơn nữa, luôn luôn nên loại bỏ các trình xử lý sự kiện không cần thiết khỏi các đối tượng của bạnChúng tôi đặt
var audioType = supportedAudioFormat[audioElement];
975 thànhvar audioType = supportedAudioFormat[audioElement];
978, sẽ khởi tạo trò chơi vào lần tới hàmvar audioType = supportedAudioFormat[audioElement];
982 được gọi trong khoảng thời gian
Đây là mã với hai chức năng bổ sung
var audioType = supportedAudioFormat[audioElement];106
Trong hàm
var audioType = supportedAudioFormat[audioElement];982, trạng thái
var audioType = supportedAudioFormat[audioElement];978 gọi hàm
var audioType = supportedAudioFormat[audioElement];845, lần lượt gọi hàm
var audioType = supportedAudioFormat[audioElement];846. Nó cũng đặt âm lượng của hai âm thanh của chúng tôi thành 50% [
var audioType = supportedAudioFormat[audioElement];847] trước khi đặt
var audioType = supportedAudioFormat[audioElement];975 thành
var audioType = supportedAudioFormat[audioElement];979
var audioType = supportedAudioFormat[audioElement];107
Hàm
var audioType = supportedAudioFormat[audioElement];846 duyệt qua hai vòng lặp
var audioType = supportedAudioFormat[audioElement];851 lồng nhau, tạo các hàng người ngoài hành tinh theo cột. Each time we create an alien, we push a dynamic object into the
var audioType = supportedAudioFormat[audioElement];806 array with the following properties
var audioType = supportedAudioFormat[audioElement];853
The number of pixels the aliens will move left or right on each call to
98
var audioType = supportedAudioFormat[audioElement];310
Vị trí bắt đầu
var audioType = supportedAudioFormat[audioElement];310 của người ngoài hành tinh trên màn hình. Giá trị này được đặt bằng cột [
var audioType = supportedAudioFormat[audioElement];857] nhân với
var audioType = supportedAudioFormat[audioElement];812, cộng với
var audioType = supportedAudioFormat[audioElement];810
var audioType = supportedAudioFormat[audioElement];311
Vị trí bắt đầu
var audioType = supportedAudioFormat[audioElement];311 của người ngoài hành tinh trên màn hình. Điều này được thiết lập bởi hàng [
var audioType = supportedAudioFormat[audioElement];862] nhân với
var audioType = supportedAudioFormat[audioElement];812, thêm vào
var audioType = supportedAudioFormat[audioElement];864
var audioType = supportedAudioFormat[audioElement];865
Chiều rộng của hình ảnh người ngoài hành tinh
var audioType = supportedAudioFormat[audioElement];866
Chiều cao của hình ảnh người ngoài hành tinh
Đây là mã cho chức năng
var audioType = supportedAudioFormat[audioElement];846
var audioType = supportedAudioFormat[audioElement];108
Trước khi chúng ta nói về bản thân trò chơi, hãy nhanh chóng thảo luận về trình xử lý sự kiện chuột, sẽ thu thập tất cả đầu vào của người dùng cho trò chơi. Khi người chơi di chuyển chuột, trình xử lý
var audioType = supportedAudioFormat[audioElement];868 được gọi. Chức năng này hoạt động giống như chức năng mà chúng tôi đã tạo cho trình phát âm thanh, ngoại trừ hai dòng cuối cùng. Hai dòng đó thiết lập các thuộc tính
var audioType = supportedAudioFormat[audioElement];310 và
var audioType = supportedAudioFormat[audioElement];311 của đối tượng
var audioType = supportedAudioFormat[audioElement];803 mà chúng ta đã tạo lại trong phần định nghĩa biến của
82. Chúng tôi sẽ sử dụng hai thuộc tính này để định vị
var audioType = supportedAudioFormat[audioElement];994 trên canvas trong hàm
98
var audioType = supportedAudioFormat[audioElement];109
Trình xử lý
var audioType = supportedAudioFormat[audioElement];361 được gọi khi người chơi nhấn và thả nút chuột trái. Khi sự kiện này xảy ra, một tên lửa sẽ bắn. Đối tượng
var audioType = supportedAudioFormat[audioElement];876 gần giống với đối tượng
var audioType = supportedAudioFormat[audioElement];877, vì nó bao gồm các thuộc tính
var audioType = supportedAudioFormat[audioElement];853,
var audioType = supportedAudioFormat[audioElement];310,
var audioType = supportedAudioFormat[audioElement];311,
var audioType = supportedAudioFormat[audioElement];865 và
var audioType = supportedAudioFormat[audioElement];866. Vì người chơi đang bắn tên lửa, nên chúng tôi đặt các vị trí
var audioType = supportedAudioFormat[audioElement];310 và
var audioType = supportedAudioFormat[audioElement];311 của tên lửa thành tâm tàu của người chơi trên trục x [
var audioType = supportedAudioFormat[audioElement];885] và thành vị trí
var audioType = supportedAudioFormat[audioElement];311 của tàu của người chơi, trừ đi chiều cao của tên lửa [
var audioType = supportedAudioFormat[audioElement];887
var audioType = supportedAudioFormat[audioElement];150
Tiếp theo là dòng mã thực sự quan trọng đầu tiên cho chủ đề hiện tại. âm thanh. Đối với lần lặp đầu tiên này của Space Raiders, chúng ta chỉ cần gọi hàm ________ 416 của ________ 8996. Điều này sẽ phát âm thanh bắn thường xuyên khi người chơi nhấn nút chuột trái [về lý thuyết]
var audioType = supportedAudioFormat[audioElement];151
Phát hiện xung đột hộp giới hạn
Trước khi đến phần chính của logic trò chơi, chúng ta nên thảo luận về phát hiện va chạm hộp giới hạn. Chúng tôi cần phát hiện va chạm giữa tên lửa mà người chơi bắn và người ngoài hành tinh mà người chơi đang bắn vào. Để làm điều này, chúng ta sẽ tạo một hàm kiểm tra xem hai đối tượng có trùng nhau không. Vì thiếu một cái tên hay hơn, chúng tôi gọi hàm này là
var audioType = supportedAudioFormat[audioElement];890
Loại thử nghiệm lần truy cập mà chúng tôi sẽ thực hiện được gọi là thử nghiệm va chạm hộp giới hạn. Điều này có nghĩa là chúng ta sẽ bỏ qua các chi tiết phức tạp của đồ họa bitmap và chỉ cần kiểm tra xem liệu một “hộp” vô hình được vẽ xung quanh các giới hạn của từng đối tượng có trùng với một hộp tương tự được vẽ xung quanh các đối tượng khác hay không
Nhớ lại rằng cả hai đối tượng động
var audioType = supportedAudioFormat[audioElement];877 và
var audioType = supportedAudioFormat[audioElement];876 đã được tạo với các thuộc tính tương tự nhau.
var audioType = supportedAudioFormat[audioElement];310,
var audioType = supportedAudioFormat[audioElement];311,
var audioType = supportedAudioFormat[audioElement];865,
var audioType = supportedAudioFormat[audioElement];866. Điều này là để hàm
var audioType = supportedAudioFormat[audioElement];890 có thể kiểm tra chúng dưới dạng các đối tượng chung, không đặc trưng cho loại đối tượng trên màn hình mà chúng đại diện. Điều này có nghĩa là chúng ta có thể thêm bất kỳ loại đối tượng nào khác vào trò chơi này [trùm ngoài hành tinh, tăng sức mạnh, tên lửa của kẻ thù, v.v. ] và nếu nó được tạo với các thuộc tính tương tự, chúng ta có thể sử dụng cùng một chức năng để kiểm tra va chạm với nó
Hàm này hoạt động bằng cách tìm các giá trị trên cùng, bên trái, dưới cùng và bên phải cho từng đối tượng, sau đó kiểm tra xem liệu có bất kỳ giá trị nào trong số đó trùng nhau không. Tính năng phát hiện va chạm hộp giới hạn sẽ được thảo luận chi tiết trong Chương 8, nhưng chúng tôi chỉ muốn cung cấp cho bạn bản xem trước về giao diện của tính năng này đối với Space Raiders
var audioType = supportedAudioFormat[audioElement];152
Bây giờ trò chơi đã sẵn sàng để chơi.
var audioType = supportedAudioFormat[audioElement];979 gọi hàm
98, là trái tim của Space Raiders. Phần đầu tiên của chức năng này chỉ đơn giản là di chuyển tên lửa và người ngoài hành tinh trên màn hình. Di chuyển tên lửa khá dễ dàng. Chúng tôi lặp qua mảng [ngược], cập nhật thuộc tính
var audioType = supportedAudioFormat[audioElement];311 của từng mảng với thuộc tính
var audioType = supportedAudioFormat[audioElement];853. Nếu chúng di chuyển khỏi đầu màn hình, chúng tôi sẽ xóa chúng khỏi mảng. Chúng ta di chuyển mảng về phía sau để chúng ta có thể
var audioType = supportedAudioFormat[audioElement];1002 phần tử mảng ra khỏi mảng và không ảnh hưởng đến độ dài vòng lặp. Nếu chúng ta không làm điều này, các phần tử sẽ bị bỏ qua sau khi chúng ta
var audioType = supportedAudioFormat[audioElement];1002 mảng
var audioType = supportedAudioFormat[audioElement];153
Vẽ người ngoài hành tinh cũng tương tự như vẽ tên lửa—với một vài ngoại lệ. Người ngoài hành tinh di chuyển sang trái và phải và khi đến cạnh của khung vẽ, họ di chuyển xuống
var audioType = supportedAudioFormat[audioElement];1004 pixel rồi đảo ngược hướng. Để đảo ngược hướng, hãy nhân thuộc tính
var audioType = supportedAudioFormat[audioElement];853 với
var audioType = supportedAudioFormat[audioElement];1006. Nếu người ngoài hành tinh đang di chuyển sang bên phải [
var audioType = supportedAudioFormat[audioElement];1007], điều này sẽ tạo thành
var audioType = supportedAudioFormat[audioElement];1008, sẽ trừ đi vị trí của
var audioType = supportedAudioFormat[audioElement];310 và di chuyển người ngoài hành tinh sang trái. Nếu người ngoài hành tinh va vào phía bên trái của canvas, thuộc tính
var audioType = supportedAudioFormat[audioElement];853 sẽ lại được nhân với
var audioType = supportedAudioFormat[audioElement];1006 [
var audioType = supportedAudioFormat[audioElement];1012], sẽ bằng với
var audioType = supportedAudioFormat[audioElement];1013. Người ngoài hành tinh sau đó sẽ di chuyển sang bên phải vì
var audioType = supportedAudioFormat[audioElement];1013 sẽ được thêm vào giá trị
var audioType = supportedAudioFormat[audioElement];310 cho người ngoài hành tinh mỗi khi
98 được gọi
var audioType = supportedAudioFormat[audioElement];154
Bước tiếp theo trong
98 là phát hiện va chạm giữa người ngoài hành tinh và tên lửa. Phần mã này lặp qua mảng
var audioType = supportedAudioFormat[audioElement];807 về phía sau trong khi lồng một vòng lặp qua mảng
var audioType = supportedAudioFormat[audioElement];806. It will test every missile against every alien to determine whether there is a collision. Vì chúng tôi đã đề cập đến chức năng
var audioType = supportedAudioFormat[audioElement];890, chúng tôi chỉ cần thảo luận về điều gì sẽ xảy ra nếu phát hiện xung đột. Đầu tiên, chúng tôi gọi hàm
16 của
var audioType = supportedAudioFormat[audioElement];995. Đây là dòng mã quan trọng thứ hai trong phiên bản này của Space Raiders, vì nó phát [hoặc cố gắng phát] âm thanh vụ nổ mỗi khi phát hiện va chạm. After that, it splices the
var audioType = supportedAudioFormat[audioElement];877 and
var audioType = supportedAudioFormat[audioElement];876 objects out of their respective arrays, and then breaks out of the nested
var audioType = supportedAudioFormat[audioElement];851 loop. Nếu không còn người ngoài hành tinh nào để bắn, chúng tôi đặt
var audioType = supportedAudioFormat[audioElement];975 thành
var audioType = supportedAudioFormat[audioElement];978, thao tác này sẽ thêm nhiều người ngoài hành tinh hơn vào canvas để người chơi có thể tiếp tục bắn
var audioType = supportedAudioFormat[audioElement];155
Một vài dòng mã cuối cùng trong
98 lặp qua các mảng
var audioType = supportedAudioFormat[audioElement];807 và
var audioType = supportedAudioFormat[audioElement];806 và vẽ chúng lên canvas. Điều này được thực hiện bằng cách sử dụng phương thức
var audioType = supportedAudioFormat[audioElement];385 của đối tượng
var audioType = supportedAudioFormat[audioElement];1032 và các thuộc tính
var audioType = supportedAudioFormat[audioElement];310 và
var audioType = supportedAudioFormat[audioElement];311 mà chúng tôi đã tính toán trước đó. Cuối cùng, nó vẽ
var audioType = supportedAudioFormat[audioElement];994 trên canvas và chức năng đã hoàn thành
var audioType = supportedAudioFormat[audioElement];156
Như chúng tôi đã nói trước đây, Space Raiders không phải là một trò chơi đầy đủ. Chúng tôi chỉ triển khai đủ để khiến người chơi bắn tên lửa để chúng tôi có thể phát âm thanh khi bắn và để phát hiện va chạm để chúng tôi có thể phát âm thanh phát nổ
Lặp lại #1. Phát âm thanh bằng một đối tượng
Chúng tôi vừa mô tả lần lặp đầu tiên của mã âm thanh động. Nó hoạt động bằng cách cố gắng gọi hàm
16 của cả
var audioType = supportedAudioFormat[audioElement];996 và
var audioType = supportedAudioFormat[audioElement];995 thường xuyên khi cần thiết. Điều này thoạt đầu có vẻ hiệu quả, nhưng nếu bạn lắng nghe cẩn thận [và điều này rõ ràng trên một số trình duyệt hơn những trình duyệt khác], âm thanh bắt đầu phát “tắt” hoặc hoàn toàn không phát. Điều này là do chúng tôi đang sử dụng một đối tượng duy nhất và cố gắng phát đi phát lại cùng một âm thanh. A single
var audioType = supportedAudioFormat[audioElement];6 was not designed to operate this way. Bạn có thể kiểm tra ví dụ này trong phân phối mã bằng cách chạy CH7EX6. html in your HTML5-compliant web browser. Nhấn nút lửa càng nhanh càng tốt và lắng nghe âm thanh phát khi nào và như thế nào. Sau một thời gian, các em bắt đầu chơi không đúng lúc, chơi không hết hoặc không chơi gì cả. Hình 7-7 cho thấy phiên bản đầu tiên của Space Raiders trông như thế nào trong trình duyệt web
Lặp lại #2. Tạo đối tượng âm thanh động không giới hạn
Vì vậy, chúng tôi gần như đã đạt được những gì mình muốn với lần lặp đầu tiên, nhưng chúng tôi gặp phải một số điều kỳ lạ khi gọi hàm
16 trên một
var audioType = supportedAudioFormat[audioElement];6 nhiều lần trước khi âm thanh phát xong
Đối với lần lặp lại thứ hai của chúng tôi, chúng tôi sẽ thử một cái gì đó khác biệt. Hãy xem điều gì sẽ xảy ra khi bạn chỉ cần tạo một đối tượng
var audioType = supportedAudioFormat[audioElement];6 mới mỗi khi bạn muốn phát âm thanh. Nếu điều này không giống như việc sử dụng hiệu quả bộ nhớ hoặc tài nguyên trong trình duyệt web, thì bạn là một người quan sát tinh tường. Nó thực sự là một ý tưởng khủng khiếp. Tuy nhiên, hãy tiếp tục để xem điều gì sẽ xảy ra
Hình 7-7. Space Raiders playing sounds from two objects
Trong
82, chúng tôi sẽ tạo một vài hằng số đại diện cho tên tệp của âm thanh mà chúng tôi muốn phát nhưng không có phần mở rộng được liên kết. Chúng tôi vẫn sẽ truy xuất tiện ích mở rộng bằng lệnh gọi tới
var audioType = supportedAudioFormat[audioElement];432, giống như chúng tôi đã làm trong lần lặp đầu tiên và lưu trữ giá trị đó trong biến
var audioType = supportedAudioFormat[audioElement];998
Chúng tôi cũng sẽ tạo một mảng có tên
var audioType = supportedAudioFormat[audioElement];1046 mà chúng tôi sẽ sử dụng để chứa tất cả các đối tượng
10
11 mà chúng tôi tạo. Mảng này sẽ cho chúng ta biết chúng ta đã tạo bao nhiêu đối tượng để chúng ta có thể nhìn thấy một cách trực quan khi tất cả bị phá vỡ
var audioType = supportedAudioFormat[audioElement];157
Thay vì gọi trực tiếp hàm
16 của từng âm thanh, chúng ta sẽ tạo một hàm có tên là
var audioType = supportedAudioFormat[audioElement];1050. Hàm này chấp nhận hai tham số
var audioType = supportedAudioFormat[audioElement];833
One of the constants we created above that contains the name of the sound file
41
Một số giữa
48 và
49 đại diện cho âm lượng của âm thanh sẽ phát
Hàm ở đây tạo một đối tượng
var audioType = supportedAudioFormat[audioElement];833 mới mỗi khi nó được gọi bằng cách gọi hàm
var audioType = supportedAudioFormat[audioElement];421 của đối tượng DOM
var audioType = supportedAudioFormat[audioElement];422. Sau đó, nó đặt các thuộc tính [
00,
06,
41] và cố gắng phát âm thanh. Để giải trí, hãy đẩy đối tượng vào mảng
var audioType = supportedAudioFormat[audioElement];1046
var audioType = supportedAudioFormat[audioElement];158
Để phát âm thanh, chúng tôi gọi
var audioType = supportedAudioFormat[audioElement];1050, chuyển các tham số thích hợp
Cuộc gọi trong
var audioType = supportedAudioFormat[audioElement];361 trông như thế này
var audioType = supportedAudioFormat[audioElement];159
Và trong
98 nó trông như thế này
var audioType = supportedAudioFormat[audioElement];400
Để hiển thị trên canvas số lượng âm thanh chúng tôi đã tạo, chúng tôi thêm mã này vào hàm
98
var audioType = supportedAudioFormat[audioElement];401
Bây giờ, hãy tiếp tục và thử ví dụ này [CH7EX7. html trong phân phối mã]. Hình 7-8 cho thấy phiên bản Space Raiders số 2 trông như thế nào. Lưu ý rằng chúng tôi đã thêm một số văn bản hiển thị ở cuối màn hình để hiển thị có bao nhiêu âm thanh trong mảng âm thanh. Bạn sẽ phát hiện ra hai vấn đề với lần lặp này
Âm thanh phát hầu như không bị tạm dừng khi được tải từ ổ đĩa cục bộ. Nhưng khi trang được tải từ một trang web từ xa, sẽ có một khoảng tạm dừng xác định trước khi mỗi âm thanh được tải và phát
Số lượng đối tượng
var audioType = supportedAudioFormat[audioElement];
833 được tạo là một vấn đề lớn. Đối với một số trình duyệt, chẳng hạn như Chrome, số lượng âm thanh hoạt động tối đa là khoảng 50. Sau đó, không có âm thanh nào phát ra cả
Hình 7-8. Space Raiders tạo âm thanh khi đang bay
Lần lặp #3. Tạo nhóm âm thanh
Vì vậy, bây giờ chúng tôi biết rằng chúng tôi không muốn chơi một
var audioType = supportedAudioFormat[audioElement];6 lặp đi lặp lại hoặc tạo các đối tượng
var audioType = supportedAudioFormat[audioElement];833 không giới hạn một cách nhanh chóng. Tuy nhiên, điều gì sẽ xảy ra nếu chúng ta giới hạn số lượng đối tượng
24 mà chúng ta tạo và đặt các đối tượng đó vào một nhóm để chúng ta có thể sử dụng chúng nhiều lần?
Chúng tôi sẽ triển khai một giải pháp sử dụng các đối tượng
var audioType = supportedAudioFormat[audioElement];6 làm đối tượng
var audioType = supportedAudioFormat[audioElement];833 có mục đích chung. We will keep a pool of them, and change the
00 attribute to whatever sound we want to play. Đây dường như là một giải pháp tao nhã giúp tái sử dụng nhiều nhất có thể, ngoài việc mang lại cho chúng tôi rất nhiều sự linh hoạt về âm thanh mà chúng tôi muốn phát
Trong
82, chúng tôi sẽ tạo một hằng số mới có tên là
var audioType = supportedAudioFormat[audioElement];1074. Điều này sẽ đại diện cho số lượng đối tượng
var audioType = supportedAudioFormat[audioElement];833 tối đa mà chúng tôi có thể tạo bất kỳ lúc nào. Chúng tôi cũng sẽ đổi tên mảng
var audioType = supportedAudioFormat[audioElement];1046 thành
var audioType = supportedAudioFormat[audioElement];1077 để mô tả rõ hơn mục đích của nó
var audioType = supportedAudioFormat[audioElement];402
Thay đổi lớn ở đây là hàm
var audioType = supportedAudioFormat[audioElement];1050. Nó sử dụng các tham số giống như tham số từ lần lặp # 2, nhưng chức năng rất khác
var audioType = supportedAudioFormat[audioElement];403
Nửa đầu của hàm lặp qua mảng
var audioType = supportedAudioFormat[audioElement];1077 để xem liệu có bất kỳ đối tượng
var audioType = supportedAudioFormat[audioElement];6 nào trong nhóm có sẵn để phát âm thanh hay không. Chúng tôi xác định điều này bằng cách kiểm tra tài sản
55. Vì chỉ có các đối tượng
var audioType = supportedAudioFormat[audioElement];6 đã được sử dụng để phát âm thanh trước đó mới được đưa vào nhóm, thuộc tính
55 sẽ được đặt thành
29 sau khi âm thanh phát xong. Bằng cách phát lại âm thanh đã kết thúc, chúng tôi loại bỏ vấn đề cố gắng sử dụng lại một đối tượng
var audioType = supportedAudioFormat[audioElement];6 để phát âm thanh khi nó đã được sử dụng
var audioType = supportedAudioFormat[audioElement];404
If we don’t find a sound, and the size of the pool is less than
var audioType = supportedAudioFormat[audioElement];1074, we go ahead and create a new
var audioType = supportedAudioFormat[audioElement];6, call its
16 function, and push it into the sound pool. Điều này giúp nhóm không trở nên quá lớn, đồng thời đảm bảo không có quá nhiều đối tượng
var audioType = supportedAudioFormat[audioElement];6 trong trình duyệt cùng một lúc
var audioType = supportedAudioFormat[audioElement];405
Bạn có thể tiếp tục và thử lặp lại này bằng cách tải CH7EX8. html trong trình duyệt web tương thích với HTML5 của bạn. In this case, it works. Bạn nghe thấy mọi âm thanh và trình duyệt không chết như với lần lặp #2
Thật không may, có một số vấn đề. Trên một số trình duyệt, vẫn có một khoảng tạm dừng trước khi phát âm thanh, giống như với lần lặp #2. Một lần nữa, điều này xảy ra thường xuyên hơn khi trang được tải từ một trang web bên ngoài so với khi trang được tải cục bộ trong trình duyệt web
Biểu hiện tồi tệ nhất của điều này xuất hiện trong Google Chrome, nơi âm thanh tạm dừng mỗi khi chúng được phát. Ngoài ra, trong Firefox,
00 không thay đổi đối với tất cả các đối tượng, làm cho âm thanh bắn phát ra khi âm thanh phát nổ sẽ phát và ngược lại
Uh-oh, có vẻ như chúng ta cần một lần lặp lại. Hình 7-9 cho thấy Space Raiders chơi với kích thước nhóm được quản lý bởi
var audioType = supportedAudioFormat[audioElement];1074
Hình 7-9. Space Raiders với một nhóm âm thanh
Lần lặp #4. Sử dụng lại âm thanh đã tải sẵn
Mặc dù mã trong lần lặp #3 khá rõ ràng, nhưng đơn giản là nó không hoạt động đối với chúng tôi. Thay vào đó, chúng ta cần phải thỏa hiệp và triển khai một giải pháp kém tao nhã hơn nhưng hoạt động để phát âm thanh gần như bất cứ khi nào chúng cần. Giải pháp này cũng phải hoạt động cả cục bộ và khi được tải từ một trang web
Đối với lần lặp lại cuối cùng này, chúng tôi sẽ sử dụng nhóm âm thanh giống như trong lần lặp lại #3, nhưng nó sẽ hoạt động theo một cách khác. Chúng tôi sẽ không sử dụng lại các đối tượng
var audioType = supportedAudioFormat[audioElement];833 cho các tệp âm thanh khác nhau. Thay vào đó, chúng tôi sẽ tải tất cả âm thanh của mình lên phía trước và chỉ cần phát một đối tượng
var audioType = supportedAudioFormat[audioElement];833 hiện không được sử dụng. Trên thực tế, chúng tôi sẽ “mồi máy bơm”, tạo ra ba đối tượng
var audioType = supportedAudioFormat[audioElement];833 cho mỗi âm thanh trong số hai âm thanh của chúng tôi để có tổng cộng sáu đối tượng
var audioType = supportedAudioFormat[audioElement];833 khi chúng tôi bắt đầu ứng dụng. Mặc dù đây có vẻ không phải là giải pháp hoàn hảo, nhưng nó dường như hoạt động khá tốt trên tất cả các trình duyệt và phát âm thanh theo cách hiệu quả nhất
Trong
82, chúng tôi đặt hằng số
var audioType = supportedAudioFormat[audioElement];1074 thành
var audioType = supportedAudioFormat[audioElement];1098. Chúng tôi có thể làm cho nó cao hơn, nhưng trong ví dụ này, chúng tôi sẽ giới hạn nó ở số lượng âm thanh mà chúng tôi sẽ tạo và tải trước
var audioType = supportedAudioFormat[audioElement];406
Sau đó, chúng tôi tạo sáu biến để giữ các đối tượng
var audioType = supportedAudioFormat[audioElement];6 của chúng tôi. ba cho âm thanh bùng nổ…
var audioType = supportedAudioFormat[audioElement];407
…và ba cho âm thanh chụp
var audioType = supportedAudioFormat[audioElement];408
Trong hàm
var audioType = supportedAudioFormat[audioElement];822, chúng tôi tải trước tất cả các đối tượng
var audioType = supportedAudioFormat[audioElement];833 này. Có, chúng tôi tải cùng một đối tượng nhiều lần
var audioType = supportedAudioFormat[audioElement];409
Trong chức năng
var audioType = supportedAudioFormat[audioElement];498, chúng tôi xóa trình xử lý sự kiện cho tất cả sáu âm thanh được tải
var audioType = supportedAudioFormat[audioElement];0
Sau đó, chúng tôi đẩy từng âm thanh vào mảng
var audioType = supportedAudioFormat[audioElement];1077 của chúng tôi. Tuy nhiên, lần này, chúng tôi đẩy chúng dưới dạng các đối tượng động để chúng tôi có thể đặt các thuộc tính sau không tồn tại trong đối tượng
var audioType = supportedAudioFormat[audioElement];6
var audioType = supportedAudioFormat[audioElement];1505
Tên của tệp âm thanh sẽ phát [một lần nữa, không có phần mở rộng]
var audioType = supportedAudioFormat[audioElement];1506
Tham chiếu đến đối tượng
var audioType = supportedAudioFormat[audioElement];6
var audioType = supportedAudioFormat[audioElement];1508
Boolean cho chúng ta biết âm thanh này đã phát một lần hay chưa. Chúng tôi cần thuộc tính này vì chúng tôi đang đặt tất cả các đối tượng
var audioType = supportedAudioFormat[audioElement];833 này vào mảng của mình, nhưng chúng vẫn chưa được phát. Điều đó có nghĩa là thuộc tính
55 của họ chưa được đặt thành
29. Thuộc tính
var audioType = supportedAudioFormat[audioElement];1508 cho chúng ta biết âm thanh đã sẵn sàng phát hay chưa—nghĩa là âm thanh chưa được phát. Chúng tôi sẽ đặt giá trị này thành
29 sau khi phát âm thanh một lần
var audioType = supportedAudioFormat[audioElement];1
Bây giờ chúng ta cần thay đổi hàm
var audioType = supportedAudioFormat[audioElement];845. Thay đổi này là để hỗ trợ phát âm thanh trong Chrome, đây dường như là trình duyệt duy nhất gặp sự cố nhỏ khi tải âm thanh theo cách này. Lần đầu tiên bạn phát âm thanh trong Chrome, sẽ có một khoảng tạm dừng trước khi âm thanh bắt đầu. Để giảm bớt điều này, chúng tôi phát từng loại âm thanh một lần nhưng đặt âm lượng thành
48. Điều này sẽ đảm bảo âm thanh được tải và sẵn sàng phát khi chúng tôi gọi
var audioType = supportedAudioFormat[audioElement];1050 lần đầu tiên trong Chrome
var audioType = supportedAudioFormat[audioElement];2
Hàm
var audioType = supportedAudioFormat[audioElement];1050 hoạt động theo cách tương tự với phép lặp #3. Nó lặp qua mảng
var audioType = supportedAudioFormat[audioElement];1077 để tìm âm thanh mà nó có thể phát. Tuy nhiên, trong phiên bản này, chúng tôi kiểm tra xem
var audioType = supportedAudioFormat[audioElement];6 đã kết thúc [
var audioType = supportedAudioFormat[audioElement];1520] hay chưa hoặc nó chưa được phát [
var audioType = supportedAudioFormat[audioElement];1521]. Chúng tôi cũng kiểm tra xem giá trị trong tham số
var audioType = supportedAudioFormat[audioElement];833 có khớp với thuộc tính
var audioType = supportedAudioFormat[audioElement];1505 của đối tượng
var audioType = supportedAudioFormat[audioElement];833 trong
var audioType = supportedAudioFormat[audioElement];1077 [
var audioType = supportedAudioFormat[audioElement];1526]
var audioType = supportedAudioFormat[audioElement];3
Sử dụng phương pháp này, chúng tôi chỉ phát âm thanh nếu nó chưa được phát, nó đã kết thúc và nó đã tải tệp âm thanh mà chúng tôi cần phát. Không có tạm dừng để tải [hầu hết thời gian] và âm thanh phát gần như đúng thời điểm chúng tôi cần để phát. Nếu chúng tôi cần thêm âm thanh, chúng tôi có thể tải thêm lên phía trước hoặc đặt
var audioType = supportedAudioFormat[audioElement];1074 thành một số lớn hơn số lượng âm thanh đã tải trước. Nếu chúng tôi làm điều đó, chúng tôi sẽ tạo các đối tượng
var audioType = supportedAudioFormat[audioElement];833 mới một cách nhanh chóng [mặc dù điều này vẫn có thể khiến bạn tạm dừng khi tải từ máy chủ web]
var audioType = supportedAudioFormat[audioElement];4
Hãy tiếp tục và thử mã này. Đó là CH7EX9. html trong phần phân phối mã hoặc bạn có thể nhập vào danh sách chương trình
Những thứ khác bạn có thể làm để cải thiện trò chơi
Vì một vài chương tiếp theo giới thiệu các khái niệm về trò chơi, chúng ta thực sự không nên đi xa hơn với Space Raiders. Tuy nhiên, nếu bạn định hoàn thành trò chơi này, đây là những điều bạn có thể cân nhắc thực hiện
Thêm điểm
Tăng tốc độ của người ngoài hành tinh trên mỗi cấp độ mới
Va chạm-phát hiện người ngoài hành tinh và người chơi
Tạo một nhóm đối tượng cho tên lửa và người ngoài hành tinh
Làm chậm tốc độ bắn với bộ đếm khung hoặc trạng thái
var audioType = supportedAudioFormat[audioElement];
1529thêm vụ nổ
Bao gồm trình tự tiêu đề, trình tự cấp độ và trình tự kết thúc trò chơi
Thêm nhạc nền lặp đi lặp lại
Mã cuối cùng cho Space Raiders
Ví dụ 7-6 hiển thị mã cuối cùng của trò chơi Space Raiders [CH7EX9. html]
Ví dụ 7-6. Space Raiders với âm thanh mạng động được tối ưu hóa và trình tải trạng thái
var audioType = supportedAudioFormat[audioElement];5
Vì đây không phải là cuốn sách về thẻ HTML5
var audioType = supportedAudioFormat[audioElement];7 nên chúng tôi không đề cập đến mọi khía cạnh của tính năng mới đó. Thay vào đó, chúng tôi tập trung vào các yếu tố của
24 có thể được sử dụng với HTML5 Canvas. Chúng tôi đã tạo hai ứng dụng chuyên sâu sử dụng âm thanh với HTML5 Canvas theo những cách rất khác nhau. trình phát âm thanh phát một bài hát và trò chơi phát nhiều âm thanh linh hoạt. Trong suốt quá trình đó, chúng tôi đã học được rằng âm thanh trong HTML, mặc dù là một tính năng mới tuyệt vời, nhưng không phải không có những cạm bẫy và vấn đề nan giải.
Trong hai chương tiếp theo, chúng ta sẽ mở rộng phần trước mà chúng ta đã trình bày ở đây và thảo luận về cách triển khai trò chơi trên HTML5 Canvas