Cách lưu âm thanh phát trực tuyến vào máy tính của bạn. Nắm vững thẻ âm thanh HTML5
Chào hỏi những người bạn! Trong video này, chúng ta sẽ tiếp tục cuộc trò chuyện về việc chèn các đối tượng vào tài liệu HTML.
Sau khi tập lệnh được kết nối, chúng ta phải thêm một tập lệnh khác để kết nối chính shell trình phát và chỉ định các tham số của trình phát:
AudioPlayer.setup("file folder/player.swf", ( width: 290,initialvolume: 100, Transparentpagebg: "yes", left: "000000", lefticon: "FFFFFF" ));
Tập lệnh này cũng phải được viết trước thẻ đóng. Điều đáng chú ý là ở đây chúng tôi đã chỉ ra độ rộng, âm lượng sẽ được đặt tự động trong khi phát lại và các thông số khác mà chúng tôi có thể thay đổi theo ý mình.
Sau khi các script được kết nối, chúng ta chỉ cần thêm Tác phẩm âm nhạc vào trang để nó có thể nghe được. Để làm điều này, chúng tôi sẽ sử dụng thẻ đoạn văn, bên trong chúng tôi có thể để lại thông tin sẽ hiển thị nếu trình phát không xuất hiện. Hãy kết nối một tập lệnh khác cho biết ID trình phát và đường dẫn đến tệp nhạc. Nó sẽ trông giống như thế này:
Âm nhạc
Ở đây cũng cần chú ý đến ID, được sử dụng để hiển thị trình phát. Cần lưu ý rằng nếu chúng ta muốn thêm nhiều thành phần vào một trang, chúng ta cần đăng ký ID mới cho mỗi tệp. Ví dụ: để thêm một tệp khác, chúng tôi sẽ thay đổi ID một chút, đại loại như thế này:
Âm nhạc
AudioPlayer.embed("audioplayer_2", (soundFile: "đường dẫn đến thư mục chứa file nhạc/tên file.mp3"));Vâng, về cơ bản là tất cả. Bây giờ chúng ta đã biết cách thêm âm thanh vào tài liệu HTML. Tất nhiên, có nhiều cách khác. Nhưng tôi nghĩ trong trường hợp của chúng tôi, tùy chọn này là khá đủ.
Video bài học: Làm thế nào để chèn âm thanh vào tài liệu HTML?Thư mục HTML và các tài liệu khác có thể và nên được tải xuống!
Đánh giá 1 Đánh giá 2 Đánh giá 3 Đánh giá 4 Đánh giá 5 Chi tiết Danh mục: Đánh giá blog Tác giả: SEO & WEB - KELL4 Tại sao bạn cần nhạc trên trang web?Đủ quan tâm Hỏi, phát tệp nhạc hoặc giọng nói trên trang web hoặc trình phát tích hợp giúp khách truy cập trang web thư giãn, khơi gợi cảm xúc tích cực và đưa họ vào tâm trạng phù hợp, có thể nói, tạo điều kiện thuận lợi cho việc tương tác với trang web. Nhưng những hiệu ứng này chỉ phát huy tác dụng nếu nhạc trên trang web được chọn chính xác và âm lượng không vượt quá giới hạn chấp nhận được, nếu không mọi nỗ lực của bạn sẽ vô ích và gây ra Cảm xúc tiêu cực từ khách truy cập trang web.
Làm cách nào để chèn âm thanh (âm nhạc) vào trang web bằng html?Chúng tôi thường được hỏi câu hỏi này; âm nhạc trên trang web là một yếu tố phù hợp và sáng tạo, đồng thời có nhiều cách để phát và chúng không quá khó thực hiện. Hãy bắt đầu với thực tế là mọi người dùng Mạng lưới toàn cầu sử dụng bất kỳ trình duyệt nào để truy cập Internet, nhưng không có công nghệ chung và phổ biến để phát các tệp âm thanh và nhạc, mỗi trình duyệt hoạt động theo thuật toán riêng và chúng hơi khác nhau nên có thể phát sinh vấn đề khi phát nhạc bằng cách nhúng nó trong mã HTML của trang. Nhưng như bạn biết, mọi vấn đề đều có thể giải quyết được!
Chèn nhạc vào website HTML, JavaScript, jQuery, AJAX các cách: 1 chiều. Tạo trình phát nhạc âm thanh trên trang web hoặc trình phátCông nghệ rất đơn giản, một tệp trình phát được tạo để nó không tải trang web hoặc máy chủ; chúng tôi chọn công nghệ mà chúng tôi sẽ sử dụng: JavaScript, jQuery, AJAX. Dựa trên công nghệ đã chọn, chúng tôi phát triển tập lệnh cho trang web của mình và chèn nó vào trang web. Kịch bản được tạo tùy thuộc vào những gì bạn cần: tự chạy nhạc nền trên trang web hoặc trình phát do khách truy cập điều khiển. Tiếp theo, tạo một thư mục trong thư mục gốc của trang web để chứa nhạc và tải các tệp âm thanh lên đó.
Hoặc, như một phương pháp thay thế, bạn có thể tạo trình phát bằng công nghệ Flash, trình phát như vậy sẽ trông ấn tượng hơn. Sự thật là trang web sẽ tốn kém hơn và khó hơn (nó sẽ làm tăng thời gian tải các trang của trang web).
Phương pháp 2.
Cài đặt nhạc trên trang web bằng HTMLSử dụng khả năng của HTML và trình duyệt, bạn có thể chèn trình phát hoặc nhạc nền vào trang web. Công nghệ này rất đơn giản: Mã HTML5 được tạo bằng thẻ “âm thanh” và mã này được ghi vào trang web và khi người dùng truy cập trang web, họ sẽ thấy một trình phát thu nhỏ, khách truy cập sẽ tự động nhấn nút phát hoặc nhạc nền bắt đầu chơi. Giao diện của trình phát sẽ phụ thuộc vào trình duyệt mà khách truy cập đã truy cập, nhưng chức năng sẽ vẫn là tiêu chuẩn: các nút Phát, Dừng, Tiếp theo, Trước, Âm lượng. Trình phát có mã HTML trông như thế này:
Bản thân mã nhúng trông như thế này:
Như bạn có thể nhận thấy, lệnh "điều khiển tự động phát" cho phép tự động phát nhạc ngay khi khách truy cập vào trang web.
Thay thế tùy chọn HTML mã là thẻ "bgsound", thẻ này hoàn toàn không sử dụng trình phát trực quan, khi bạn truy cập trang web, nhạc trên trang web sẽ bắt đầu phát nhưng bạn có thể điều chỉnh âm lượng, tạm dừng, v.v. người dùng sẽ không thể làm được. Cài đặt âm lượng phát lại tệp âm thanh được định cấu hình trong chính mã.
Định dạng tập tin âm thanhđể phát nhạc trên trang web có thể có: WAV, AU, MIDI, MP3, OGG (tiện ích mở rộng). Tệp nhạcđược tải lên trang web hoặc các liên kết được sử dụng đến các trang web chứa tệp âm thanh, điều chính là nó thuộc phạm vi công cộng.
Âm thanh HTML5 cung cấp khả năng cải tiến để làm việc với nội dung âm thanh. Cho đến gần đây, cách duy nhất để thêm tệp âm thanh vào trang web là tích hợp âm thanh nền bằng thẻ sẽ phát trong khi người dùng đang duyệt trang mà không có tùy chọn tắt nó.
Nhờ việc bổ sung một thành phần mới vào đặc tả HTML5, giờ đây có thể thêm nội dung âm thanh có nhúng giao diện phần mềm mà không cần sử dụng plug-in.
Cách thêm âm thanh HTML5 vào trang web 1. Hỗ trợ Trình duyệt phần tửTỨC LÀ: 9.0
Firefox: 3.5 hỗ trợ cơ bản, 15.0 - đầy đủ
Chrome: 3.0
Safari: 3.1
Opera: 10,5
Safari của iOS: 7.1
Opera Mini: -
Trình duyệt Android: 4.1
Trình duyệt Chrome dành cho Android:
44
Phần tử HTML5 được sử dụng để nhúng nội dung âm thanh vào các trang web. TRONG nhìn chungĐánh dấu HTML trông như thế này:
Thuộc tính điều khiển thêm trình duyệt để hiển thị giao diện điều khiển trình phát âm thanh - nút phát, tạm dừng, âm lượng.
Cơm. 1. Vẻ bề ngoài trình phát âm thanh trong các trình duyệt khác nhau TRONG Hiện nay Không có định dạng âm thanh nào hoạt động trên tất cả các trình duyệt, do đó, để đảm bảo nội dung có thể tiếp cận được với nhiều đối tượng nhất có thể, bạn nên bao gồm nhiều nguồn âm thanh được trình bày bằng cách sử dụng thuộc tính src yếu tố . Đồng thời, bạn có thể thêm nội dung dự phòng cho những trình duyệt không hỗ trợ phần tử.
Tải xuống tên.mp3
| tự chạy | Tự động phát lại tệp âm thanh ngay sau khi tải trang. |
| điều khiển | Cho trình duyệt biết nội dung cần hiển thị yếu tố cơ bảnđiều khiển phát lại (bắt đầu và dừng phát lại, đi đến vị trí ghi khác, điều chỉnh âm lượng). |
| vòng | Phát lại vòng lặp của một tập tin âm thanh. |
| tắt tiếng | Tắt âm thanh khi phát tập tin âm thanh. |
| tải trước | Thuộc tính chịu trách nhiệm tải trước nội dung âm thanh. Tùy chọn, một số trình duyệt bỏ qua nó. Những giá trị khả thi: tự động - Trình duyệt tải xuống toàn bộ tệp âm thanh để có sẵn khi người dùng bắt đầu phát. siêu dữ liệu - trình duyệt tải đầu tiên Một phần nhỏ tập tin âm thanh để xác định các đặc điểm chính của nó. không - vắng mặt tải xuống tự động tập tin âm thanh. |
| src | Chứa URL tuyệt đối hoặc tương đối của tệp âm thanh. |
Bộ giải mã âm thanh (bộ giải mã) là một chương trình chuyển đổi dữ liệu kỹ thuật số thành tệp âm thanh hoặc định dạng luồng âm thanh. Các định dạng âm thanh phổ biến là:
MP3 là định dạng âm thanh phổ biến nhất sử dụng tính năng nén có tổn hao và cho phép bạn giảm kích thước tệp nhiều lần. Do phí cấp phép nên Firefox và Opera không được hỗ trợ.
A.A.C. (Bộ giải mã âm thanh nâng cao)- codec đóng, tương tự như MP3, nhưng so với MP3, hỗ trợ nhiều hơn chất lượng caoâm thanh có kích thước tập tin tương tự.
Ogg Vorbis - định dạng miễn phí Với mã nguồn mở, được hỗ trợ trong Firefox, Opera và Chrome. cung cấp chất lượng tốtâm thanh, nhưng không được người chơi phần cứng hỗ trợ rộng rãi.
3. Tài nguyên truyền thông thay thếPhần tử này được sử dụng để thêm nhiều tài nguyên phương tiện cho và . Cho biết các tệp video/âm thanh thay thế mà trình duyệt có thể chọn dựa trên loại phương tiện hoặc codec được hỗ trợ.
4. Thêm phụ đề và tiêu đềPhần tử được sử dụng như phần tử con Và . Thêm đoạn văn bản cho phụ đề, tiêu đề phương tiện hoặc các nội dung khác thông tin văn bản, sẽ hiển thị khi phát tệp âm thanh hoặc video.
| mặc định | Cho biết bản nhạc này được phát theo mặc định. Chỉ một phần tử có thể chứa một thuộc tính nhất định. |
| loại | Chỉ định loại bản nhạc văn bản; phụ đề được hiển thị theo mặc định. Giá trị được chấp nhận: chú thích - dịch các đoạn hội thoại và hiệu ứng âm thanh, được hiển thị dưới dạng văn bản trên video (dành cho người dùng khiếm thính). chương - thêm tiêu đề chương làm danh sách để điều hướng qua tệp phương tiện. mô tả - thêm mô tả âm thanh về những gì đang diễn ra trong video (dành cho người dùng mù). siêu dữ liệu - siêu dữ liệu được sử dụng bởi tập lệnh không được hiển thị cho người dùng. phụ đề - sao chép văn bản Track âm thanh video được hiển thị dưới dạng phụ đề cho video. |
| nhãn | Thêm tiêu đề bài hát. Nếu thuộc tính này không được đặt, trình duyệt sẽ áp dụng giá trị mặc định. |
| src | Chứa URL tuyệt đối hoặc tương đối cho dữ liệu theo dõi văn bản. |
| srclang | Ngôn ngữ của bản nhạc đang được phát. |
Sử dụng các kiểu CSS bạn có thể cung cấp cho trình phát âm thanh cái nhìn khác thường. Việc phát lại được điều khiển bằng cách sử dụng kịch bản nhỏ(đã sử dụng thư viện jQuery), âm thanh sẽ xuất hiện khi bạn di chuột qua bản ghi.
Xin chào các độc giả blog thân mến. Không có gì ngạc nhiên khi ở Gần đây các trang truyền thông ngày càng trở nên phổ biến. Trên những trang như vậy, điều đó rất thú vị, chẳng hạn, bạn có thể xem một số video hoặc nghe âm nhạc tuyệt vời. Nhưng lần này chúng ta sẽ nghe nhạc, cụ thể là chúng ta sẽ học cách chèn các tệp âm thanh vào trang web của mình bằng HTML5.
Hóa ra, HTML5 hỗ trợ thẻ âm thanh, giúp việc chèn nhạc vào trang web trở nên rất dễ dàng. Đúng là không phải tất cả các trình duyệt cũ đều phát tệp âm thanh, nhưng tất cả trình duyệt hiện đại họ làm điều đó một cách thành công.
Hỗ trợ trình duyệt demoTất cả các trình duyệt hỗ trợ thẻ là IE9+, Chrome, Opera, Safari và Firefox. Nhưng còn một sắc thái nữa: không phải trình duyệt nào cũng hỗ trợ tất cả các định dạng âm thanh.
Ví dụ: IE9+ chỉ hỗ trợ file mp3, không hỗ trợ wav và ogg.
Chrome sau phiên bản 6 hỗ trợ hầu hết các định dạng.
Opera 10+ không hỗ trợ mp3, thành thật mà nói, đối với tôi, có vẻ như đây là nhược điểm rất lớn của nó, chẳng hạn như định dạng phổ biến và không hỗ trợ nó. Nhưng nó hoạt động tốt với wav và ogg.
VỚI Trình duyệt Firefox câu chuyện tương tự như với Opera. Đối với điều này, cô ấy có một điểm trừ rất lớn và béo.
Safari hỗ trợ tất cả các định dạng âm thanh ngoại trừ ogg.
Thêm tệp âm thanh vào trang webĐể thêm tệp âm thanh vào trang web của bạn, bạn cần bao gồm liên kết trực tiếp đến tệp giữa các thẻ. Liên kết được chỉ định bằng cách sử dụng thẻ. Mã hoàn thiện sẽ trông như thế này:
Như bạn có thể thấy, 3 tệp đã được thêm vào đây cùng một lúc, vì vậy nếu một số trình duyệt không hỗ trợ mp3, nó sẽ tự động phát định dạng tương tự, v.v.
Và nếu trình duyệt hoàn toàn không hỗ trợ thẻ thì thông báo này “Trình duyệt của bạn không hỗ trợ âm thanh” sẽ bật lên.
Nhưng chúng tôi là những người tử tế :-) Và nếu người dùng không thể nghe nhạc, chúng tôi sẽ cho phép họ tải xuống. Để làm điều này, bạn chỉ cần thêm liên kết vào các tập tin. Như vậy chúng ta sẽ nhận được đoạn mã sau:
Trình duyệt của bạn không hỗ trợ âm thanh
Tiêu đề, Tiêu đề, Tiêu đềBằng cách này, người dùng có thể tải xuống tệp :-)
Các bạn, đây là một ví dụ về công việc của chúng tôi. Một trình phát đơn giản được cài đặt bởi chính trình duyệt.
Thử nghiệmChỉ thế thôi, các bạn thân mến. Nếu bạn có bất kỳ câu hỏi hoặc khó khăn nào, hãy hỏi trong phần bình luận. Hẹn sớm gặp lại.
Câu hỏi này xuất hiện rất thường xuyên nên tôi quyết định dành một bài riêng cho nó trong các bài học. Vì HTML không có công nghệ chung để phát âm thanh cho tất cả các trình duyệt nên để giải quyết vấn đề này, tôi khuyên bạn nên tải xuống tệp trình phát âm thanh, như được thực hiện trên hầu hết các trang web. Chúng tôi làm mọi thứ từng bước một:1. Về lưu trữ, nơi đặt trang web của bạn, trong thư mục gốc(thư mục ở đó tập tin chỉ mục), tạo thư mục âm thanh. Trong tương lai bạn sẽ đặt tất cả các tập tin âm thanh vào đó.
3. Bây giờ hãy chọn tập tin cần thiết, tốt hơn ở định dạng mp3. Tạo một thư mục âm thanh trong thư mục gốc của trang web và tải chúng lên.
4. Tất cả những gì còn lại là chèn mã kết nối trình phát. Nó phù hợp với bất kỳ trang web nào, ở đúng nơi bạn chỉ cần chỉ ra đường dẫn đến file player và file âm thanh, thay thế lần lượt các từ your_domain và audio_file name:
Và mọi thứ đã sẵn sàng! Bạn cũng có thể xem ví dụ hoạt động.
Cách đầu tiên là thẻ nhúng. Phần tử nhúng được sử dụng để tải và hiển thị các đối tượng (ví dụ: tệp video, phim flash, một số tệp âm thanh, v.v.) mà ban đầu trình duyệt không hiểu được.
Cú pháp khá đơn giản:
Thẻ đóng là không cần thiết.
Bây giờ hãy xem ví dụ về một bản ghi có các thuộc tính và bên dưới là phần giải mã của chúng:
Nhúng thuộc tính thẻ để phát âm thanh trong html
chiều rộng - chiều rộng của bảng tính bằng pixel (hoặc phần trăm)
chiều cao - chiều cao của bảng tính bằng pixel (hoặc phần trăm)
căn chỉnh - vị trí của bảng so với văn bản, các giá trị có thể là trái, phải, giữa
ẩn - cho phép bạn ẩn bảng, giá trị thuộc tính: true - bảng bị ẩn, sai - bảng hiển thị (giá trị mặc định)
tự khởi động - đúng - trình phát tự động khởi động khi tải trang, sai - đợi nhấn nút phát
vòng lặp - vòng lặp, đúng - bản nhạc được phát theo vòng tròn và nếu sai - chỉ một lần
Cách thứ hai. Rất cũ nhưng cũng thực tế) Thêm giai điệu vào cùng một thư mục (thư mục) nơi đặt tệp của bạn và viết đoạn mã sau vào phần nội dung:
Kết quả là sau khi tải trang, giai điệu bạn chỉ định trong thẻ bgsound sẽ phát ra. Bây giờ chúng ta hãy xem xét kỹ hơn các thuộc tính của thẻ:
src - đường dẫn tới file âm thanh của bạn
loop - lặp lại giai điệu bao nhiêu lần (nếu -1 thì lặp lại không ngừng)
cân bằng - giá trị cân bằng âm thanh nổi (từ -10000 đến 10000)
âm lượng - âm lượng phát lại giai điệu, trong đó 0 là mức tối đa và -10000 là mức tối thiểu.
Tuy nhiên, sẽ không có cách nào để điều khiển trình phát theo bất kỳ cách nào - mỗi khi trang được làm mới, bản nhạc sẽ được phát lại.
Sau khi mô tả phương pháp chèn nhạc nền, tôi muốn ngăn bạn điều này, vì theo quy định, hầu hết người dùng đều đã nghe nhạc khi họ truy cập các trang web khác nhau. Vì vậy, âm nhạc đi kèm chỉ có thể buộc anh ta phải đóng tab với trang web.
Chèn âm thanh, nhạc vào HTML5 - thẻ âm thanhâm thanh - xác định thẻ ghép nối nhạc nền, âm nhạc hoặc luồng âm thanh khác trên trang web.
Thuộc tính thẻ âm thanh
tự động phát - tệp được phát ngay lập tức khi trang được tải (tương tự như nhạc nền bssound)
điều khiển - hiển thị bảng điều khiển trình phát trong trình duyệt
vòng lặp - phát lại tệp sau khi nó kết thúc
tải trước - tệp âm thanh sẽ được tải cùng với quá trình tải trang
src - đường dẫn đến tệp âm thanh (mp3 hoặc ogg)
Mã ví dụ với thẻ âm thanh
Thẻ âm thanh
Âm thanh trong HTML 5
Thẻ âm thanh không được trình duyệt của bạn hỗ trợ.
Tải nhạc.
