HTML5 cho phép các nhà phát triển nhúng âm thanh vào tệp HTML và xây dựng trình phát âm thanh HTML5 đơn giản bằng cách sử dụng phần tử âm thanh HTML5 với Javascript. Tạo kịch bản âm thanh dễ dàng bằng cách sử dụng các tính năng mới của Javascript và HTML5

Bạn đang xem: phát javascript âm thanh html5

Tập lệnh cho Trình phát âm thanh HTML5 Đơn giản sử dụng Javascript

HTML5 cho phép các nhà phát triển nhúng âm thanh vào tệp HTML và xây dựng trình phát âm thanh HTML5 đơn giản bằng cách sử dụng phần tử âm thanh HTML5 mới với Javascript.
Viết kịch bản âm thanh chưa bao giờ dễ dàng như vậy khi sử dụng các tính năng mới của Javascript và HTML5.

Cũng giống như trường hợp phát tệp video trong HTML, các nhà lập trình web muốn tạo các điều khiển trình phát âm thanh HTML5 tùy chỉnh như phát, dừng (tạm dừng) hoặc tua lại tệp âm thanh hoặc nhạc.
Trong trường hợp này, khi bạn tạo các mục trực quan thay vì điều khiển âm thanh HTML5, bằng cách tạo tập lệnh cho các phần tử âm thanh sử dụng Javascript, các nhà phát triển có thể cho phép người dùng web điều khiển phần tử âm thanh trong trang HTML theo cách tùy chỉnh của riêng họ.

Có thể nhúng âm thanh vào trang HTML và lập trình điều khiển âm thanh bằng cách tạo trình phát âm thanh tùy chỉnh và tạo âm thanh kịch bản bằng cách sử dụng Javascript trong trang HTML.
Trong hướng dẫn HTML5 này, tôi muốn giới thiệu cách các nhà phát triển HTML có thể tạo kịch bản cho phần tử âm thanh HTML5 bằng cách sử dụng lập trình Javascript.

Là bước đầu tiên trong việc xây dựng trình phát âm thanh HTML5 đơn giản, tôi muốn thêm thẻ HTML5 mới âm thanh với các điều khiển bị tắt.
Vì vậy, người dùng web sẽ không thể nhận ra rằng có phần tử âm thanh HTML5 trong trang HTML.
Tất cả những gì bạn phải làm là sao chép và dán mã nguồn trang web HTML5 của mình.


& lt; audio id = “audio” & gt; & lt; / audio & gt;

Mã số

Bước thứ hai trong hướng dẫn này, hãy lập danh sách các bài hát mà khách truy cập có thể chọn để nghe nhạc trên trang web của bạn.
Tôi đã sử dụng các bài hát tồn tại theo mặc định trong thư mục Nhạc mẫu của cài đặt Windows 7 của mình.
Kalimba, Người hầu gái với mái tóc lanh và giấc ngủ đi.


& lt; a href = “javascript: void ();” onclick = “SetHTML5AudioFile (this);” data-audio = “Kalimba.mp3” & gt; Kalimba & lt; / a & gt;

Mã số

Đối với mỗi bài hát trong danh sách, tôi đã xác định sự kiện onClick kích hoạt hàm Javascript SetHTML5AudioFile.
Trong hàm Javascript này, đối tượng nguồn phần tử âm thanh HTML5 được đặt bằng cách sử dụng thuộc tính src của đối tượng audio .

Xem Thêm  Cách viết mệnh đề WHERE trong SQL - ở đâu trong danh sách sql


function SetHTML5AudioFile (obj) {
var path = “/ audio /”;
var audio = document.getElementById (“audio”);
var song = obj.getAttribute (“data-audio”);
var audio_file_path = path + song;
audio.src = audio_file_path;
}

Mã số

Để đơn giản hóa đoạn mã dưới đây, vui lòng ghép nối vào:
var audio = document.getElementById ("audio");
nơi phần tử âm thanh HTML5 trong trang HTML được tìm nạp bằng cách sử dụng getElementById
audio.src = audio_file_path;
nơi đặt đường dẫn URL của tệp nguồn âm thanh (nhạc hoặc tệp âm thanh).

Trong bước tiếp theo của hướng dẫn âm thanh HTML5 này, bây giờ bạn có thể tạo ba điều khiển để xây dựng một trình phát âm thanh HTML5 đơn giản.
Các nút điều khiển này là các nút Phát , Tạm dừng Tua lại cho các chức năng tương ứng trong âm thanh HTML5 được nhúng.


& lt; button id = “btnPlay” onclick = “PlayAudioFile ();” & gt; & gt; (Phát) & lt; / nút & gt;
& lt; button id = “btnPause” onclick = “PauseAudioFile ();” & gt; || (Tạm dừng) & lt; / nút & gt;
& lt; button id = “btnRewind” onclick = “RewindAudioFile ();” & gt; | & lt; & lt; (Tua lại) & lt; / nút & gt;

Mã số

Tất nhiên, bạn có thể tạo hình ảnh và bố cục tuyệt vời cho trình phát âm thanh HTML5 tùy chỉnh của mình.
Tôi chỉ cần thêm ba nút vào trang HTML5.

Điều quan trọng về các nút HTML này là chúng kích hoạt các chức năng Javascript tùy chỉnh được xác định trong sự kiện onClick của mỗi nút.

Ví dụ: btnPlay kích hoạt hàm Javascript PlayAudioFile () .
Đây là nguồn của hàm PlayAudioFile ().
Phần tử âm thanh đầu tiên trong trang HTML5 được tìm nạp bằng cách sử dụng document.getElementById .
Sau đó, đối tượng âm thanh có nguồn được xác định trước đó sẽ bắt đầu phát bằng phương thức phần tử âm thanh play () .


function PlayAudioFile () {
var audio = document.getElementById (“audio”);
audio.play ();
}

Mã số

Tương tự như điều khiển Phát, điều khiển Tạm dừng cũng đầu tiên tạo phần tử âm thanh trong trang HTML5.
Sau đó, phương thức pause () của đối tượng âm thanh được gọi như sau:


function PauseAudioFile () {
var audio = document.getElementById (“audio”);
audio.pause ();
}

Mã số

Tua lại điều khiển trong trình phát đơn giản của chúng tôi không khác ở trên. Những người lập trình HTML5 đầu tiên nên xác định đối tượng âm thanh bằng thẻ & lt; audio & gt; trong trang HTML.
Nhưng sau đó bằng cách sử dụng thuộc tính currentTime đối tượng âm thanh, các nhà phát triển có thể đặt vị trí hiện tại của tệp âm thanh về đầu bằng cách đặt “currentTime = 0”
Đây là mã Javascript có thể được sử dụng để tạo kịch bản cho đối tượng âm thanh HTML5 để tua lại.

Xem Thêm  Màu sắc Html - màu trong mã html


function RewindAudioFile () {
var audio = document.getElementById (“audio”);
audio.pause (); // Tôi muốn tạm dừng trình phát âm thanh
audio.currentTime = 0;
}

Mã số

Các nhà phát triển cũng có thể điều chỉnh âm lượng bằng cách lập trình phần tử âm thanh trong trang HTML5.

Vui lòng kiểm tra mẫu hoạt động cho trình phát âm thanh HTML5 đơn giản được mô tả trong hướng dẫn HTML5 này tại Tạo kịch bản Phần tử âm thanh HTML5 bằng Javascript .
Và đây là nguồn HTML cho hướng dẫn HTML5 này trình bày phần tử âm thanh HTML5 và tập lệnh âm thanh nhúng trong tệp HTML.


& lt; script & gt;
function SetHTML5AudioFile (obj) {
var path = “/ audio /”;
var audio = document.getElementById (“audio”);
var song = obj.getAttribute (“data-audio”);
var audio_file_path = path + song;
audio.src = audio_file_path;

txtSong.value = song;

btnPlay.disabled = false;
btnPause.disabled = true;
btnRewind.disabled = true;
}
function PlayAudioFile () {
var audio = document.getElementById (“audio”);
audio.play ();

btnPlay.disabled = true;
btnPause.disabled = false;
btnRewind.disabled = false;
}
function PauseAudioFile () {
var audio = document.getElementById (“audio”);
audio.pause ();

btnPlay.disabled = false;
btnPause.disabled = true;
btnRewind.disabled = false;
}
function RewindAudioFile () {
var audio = document.getElementById (“audio”);
audio.pause ();
audio.currentTime = 0;

btnPlay.disabled = false;
btnPause.disabled = true;
btnRewind.disabled = true;
}
& lt; / script & gt;

& lt; p & gt; Chọn bài hát của bạn để phát bằng phần tử âm thanh HTML5. & lt; / p & gt;
& lt; ul & gt;
& lt ; li & gt; & lt; a href = “javascript: void ();” onclick = “SetHTML5AudioFile (this);” data-audio = “Kalimba.mp3” & gt; Kalimba & lt; / a & gt; & lt; / li & gt;
& lt; li & gt; & lt; a href = “javascript: void ();” onclick = “SetHTML5AudioFile (this);” data-audio = “Sleep Away.mp3” & gt; Sleep Away & lt; / a & gt; & lt; / li & gt;
& lt; li & gt; & lt; a href = “javascript: void ();” onclick = “SetHTML5AudioFile (this);” data-audio = “Maid with Flaxen Hair.mp3” & gt; Maid with Flaxen Hair & lt; / a & gt; & lt; / li & gt;
& lt; / ul & gt;
& lt; audio id = “audio” & gt; & lt; / audio & gt;
& lt; input id = “txtSong” type = “text” / & gt;
& lt; button id = “btnPlay” onclick = “PlayAudioFile ();” bị vô hiệu hóa = “bị vô hiệu hóa” & gt; & gt; (Phát) & lt; / button & gt;
& lt; button id = “btnPause” onclick = “PauseAudioFile ();” bị vô hiệu hóa = “bị vô hiệu hóa” & gt; || (Tạm dừng) & lt; / button & gt;
& lt; button id = “btnRewind” onclick = “RewindAudioFile ();” bị vô hiệu hóa = “bị vô hiệu hóa” & gt; | & lt; & lt; (Tua lại) & lt; / button & gt;

Mã số


Xem thêm những thông tin liên quan đến chủ đề phát javascript âm thanh html5

4. HTML5 Custom Video Controls JavaScript Volume Programming Tutorial

  • Tác giả: Adam Khoury
  • Ngày đăng: 2013-07-09
  • Đánh giá: 4 ⭐ ( 8676 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Lesson Code: http://www.developphp.com/video/JavaScript/Video-Volume-Change-and-Mute-Programming-Tutorial
    Welcome to part 4 of customizing the HTML5 video controls. In this lesson we will focus on programming volume controls into our custom video player using JavaScript. We are going to add a mute button and volume slider control by accessing the “muted” and “volume” properties of the video object in JavaScript.
Xem Thêm  Nhận vị trí của phần tử bằng JavaScript - lấy vị trí của phần tử js

Hiệu ứng âm thanh trong JavaScript / HTML5

  • Tác giả: vi.waldorf-am-see.org
  • Đánh giá: 3 ⭐ ( 3573 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tôi đang sử dụng HTML5 để lập trình trò chơi; trở ngại mà tôi gặp phải bây giờ là cách phát hiệu ứng âm thanh. Các yêu cầu cụ thể có số lượng ít: Phát và trộn nhiều âm thanh, Chơi cùng một mult mẫu …

Thư Viện Audio Javascript Miễn Phí Cho Lập Trình Web

  • Tác giả: www.niemvuilaptrinh.com
  • Đánh giá: 3 ⭐ ( 7551 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong bài viết hôm nay mình sẽ giới thiệu đến bạn những thư viện giúp tạo và xử lý audio trong trang web mà được lập trình viên tin tưởng và sử dụng phổ biến trong năm 2020 nhé!

Phát âm thanh trên web với HTML5

  • Tác giả: www.javascriptbank.com
  • Đánh giá: 5 ⭐ ( 6035 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Nếu bạn là người quan tâm đến các công nghệ mới trong lĩnh vực phát …Phát âm thanh trên web với HTML5 – Phát âm thanh trên web với HTML5 – Ngôn ngữ: tiếng Việt

Hiệu ứng âm thanh trong JavaScript / HTML5

  • Tác giả: qastack.vn
  • Đánh giá: 3 ⭐ ( 7529 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] AudioĐối tượng HTML5 Bạn không cần bận tâm đến

Audio và Video trong HTML5

  • Tác giả: vietjack.com
  • Đánh giá: 4 ⭐ ( 6206 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Audio và Video trong HTML5 – Học HTML5 cơ bản và nâng cao theo các bước đơn giản và dễ dàng với các ví dụ qua các chương hướng dẫn gồm 2D Canvas, Audio, Video, Các phần tử Semantic mới, Geolocation, Kho lưu Web, Local Storage vĩnh viễn, Kho lưu Local vĩnh viễn, Web Storage, Web SQL, Forms 2.0, Microdata và hoạt động kéo và thả, hoạt động Drag và Drop.

Audio Sprite Và Audio Sprite Với HTML5 — JavaScript

  • Tác giả: www.stdio.vn
  • Đánh giá: 3 ⭐ ( 5939 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Audio Sprite (hay có người gọi là Sound Sprite) Sprite Sheet hỗ trợ phát 1 đoạn âm thanh trong 1 file âm thanh trong JavaScript.

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

By ads_php