HTML5 giới thiệu hỗ trợ phương tiện tích hợp sẵn với thẻ
Đây thường là giao diện trong trình duyệt của bạn [một số có thể thay đổi]
Ví dụ
Bạn có thể thử chạy đoạn mã sau để thêm trình phát âm thanh vào trang web HTML
Bản thử trực tiếp
HTML audio TagClick on Play button...
[Song: Kalimba which is provided as a Sample Music in Windows]
Trước tiên, hãy phân tích logic của trình phát và những gì chúng tôi triển khai ở đây, đồng thời triển khai chuyển đổi các bản nhạc và chính danh sách phát, đối với việc tạm dừng, thì trong HTML đã có sẵn theo tiêu chuẩn.
HTML
Let's start with HTML, there is nothing complicated here, just write the tag < audio> inside the document and add an attribute controls.
XHTML
Đây là kết quả.
Như bạn có thể thấy trình phát HTML tiêu chuẩn trông rất đẹp, nhưng có một vấn đề là khả năng của nó bị hạn chế, bạn chỉ có thể dừng bản nhạc và thay đổi âm lượng và tất cả, theo ý kiến của tôi thì không .
Vì bây giờ chúng ta có một màn hình trống nên chúng ta sẽ thêm các nút để điều khiển, đồng thời là thẻ cho các bản âm thanh.
XHTML
Play
Pause
<prev
next>
Hãy chia nhỏ nó, < div> với rãnh âm thanh của lớp, đây là rãnh âm thanh, bên trong nó có một < div> với thời gian của lớp, đây là phần còn lại của thời gian còn lại để .
Ngoài ra, tiếp theo là bốn thẻ < button> , nút này, nút đầu tiên để phát nhạc, nút thứ hai để tạm dừng, nút thứ ba chuyển sang bản nhạc trước, nút thứ tư chuyển sang bài hát tiếp theo.
CSS
Bây giờ hãy chuyển sang CSS, với sự trợ giúp của nó, chúng tôi sẽ chỉ thay đổi bản nhạc, chúng tôi sẽ để các nút theo mặc định, vì chúng được tạo trong trình duyệt.
CSS
.audio-track {
width: 150px;
height: 3px;
background-color: #dddddddddd;
margin: 20px 0
}
.time {
width: 0;
height: 3px;
background-color: #474747
}
Đây là kết quả.
Chúng tôi có một bản nhạc nhỏ, màu xám và khi phát nó sẽ gần như màu đen do < div> tăng theo thời gian của lớp.
JavaScript
Đã đến lúc quan trọng nhất, tạo logic cơ bản bằng JavaScript thuần túy, trước tiên chúng ta sẽ lấy tất cả các thành phần từ HTML.
JavaScript
let audio = document.getElementById["audio"]; // Take the audio element
let time = document.querySelector[".time"]; // Take the audio track
let btnPlay = document.querySelector[".play"]; // Take the play button
let btnPause = document.querySelector[".pause"]; // Take the pause button
let btnPrev = document.querySelector[". prev"]; // Take the switch button of the previous track
let btnNext = document.querySelector[".next"]; // Take the button to switch the next track
Ở đây chúng ta chỉ lấy các phần tử sẽ làm việc, chúng ta lấy phần tử
Tiếp theo, hãy tạo một mảng có tên bản nhạc và một biến sẽ lưu trữ chỉ mục của bản nhạc trong mảng.
JavaScript
// Array with song titles
let playlist = [
'treck1.mp3',
'treck2.mp3',
'treck3.mp3',
'treck4.mp3',
];
let treck; // Variable with track index
// Event before page loading
window. onload = function[] {
treck = 0; // Assign zero to the variable
}
Điều thú vị nhất trong mã này là cửa sổ. onload, nó cần thực hiện một số hành động khi tải trang, trong trường hợp của chúng tôi, nó gán giá trị bằng 0 cho biến treck.
Rất nhiều người thắc mắc tại sao chúng ta nên gán giá trị cho một biến tại thời điểm tải trang mà không phải tại thời điểm khai báo vì nếu không giá trị của nó sẽ luôn bằng 0 và chúng ta cần sử dụng nó để .
Bây giờ hãy chuyển sang chức năng chuyển bài hát.
JavaScript
function switchTreck [numTreck] {
// Change the src attribute value
audio.src = './audio/' + playlist[numTreck];
// Assign a song time of zero
audio. currentTime = 0;
// Play the song
audio.play[];
}
Ban đầu, chúng tôi chuyển chỉ mục của bài hát mà chúng tôi cần vào hàm, sau đó chúng tôi thay đổi đường dẫn đến bản nhạc, sử dụng âm thanh. src, chúng ta chỉ định đường dẫn đến bài hát chúng ta cần bằng cách lấy tên bài hát từ danh sách phát.
Sau đó, chúng tôi chỉ định âm thanh. giá trị currentTime bằng 0, nó chịu trách nhiệm cho phút bài hát đang phát, nghĩa là chúng tôi đặt bài hát ở giây thứ 0.
Việc cuối cùng là chạy bài hát qua âm thanh. chơi[].
Bây giờ, hãy chuyển sang xử lý các sự kiện của các nút này, để hoạt động với trình phát và âm nhạc.
JavaScript
btnPlay.addEventListener["click", function[] {
audio.play[]; // Start the song
// Start interval
audioPlay = setInterval[function[] {
// Get the value of what second the song is at
let audioTime = Math.round[audio.currentTime];
// We get songs all the time
let audioLength = Math.round[audio.duration]
// Assign a width to an element at time
time.style.width = [audioTime * 100] / audioLength + '%';
// Compare what second the track is now and how long in total
// And check that the treck variable is less than four
if [audioTime == audioLength && treck < 3] {
treck++; // then Increase the variable
switchTreck[treck]; // change track
// Otherwise we check the same, but the treck variable is greater than or equal to four
} else if [audioTime == audioLength && treck >= 3] {
treck = 0; // then we assign treck to zero
switchTreck[treck]; Change track
}
}, 10]
}];
Đây có lẽ là phần khó nhất của chương trình, khi chúng ta nhấn nút "Play".
Điều đầu tiên chúng tôi bắt đầu phát bài hát, sau đó chúng tôi bắt đầu ngắt quãng, chúng tôi cần nó để theo dõi khi nào chuyển sang bản nhạc tiếp theo.
Trong khoảng thời gian, chúng tôi chỉ định biến audioTime cho giây mà bản nhạc hiện đang ở đó và biến audioLength, chúng tôi chỉ định tổng số giây mà bài hát kéo dài, sau đó tính toán theo công thức là bao nhiêu .
Một điều kiện khi chúng tôi kiểm tra biến audioTime và audioLength, cần đảm bảo rằng bài hát đã kết thúc, đồng thời kiểm tra biến treck, xem nó có nhỏ hơn ba hay không, điều cần thiết là bài hát đó đã kết thúc. .
Nếu điều kiện đúng, hãy tăng biến trek và thay đổi bài hát bằng cách chuyển đổi chức năng Theo dõi.
Ngược lại, chúng ta kiểm tra lại bài hát đã hết chưa, nhưng bây giờ chúng ta tìm biến treck lớn hơn hoặc bằng 3, nếu đúng chúng ta gán nó bằng 0 và cũng thay đổi bài hát.
Bước tiếp theo là xử lý nút tạm dừng.
JavaScript
1
2
3
4 . addEventListener["click", function[] {
âm thanh. tạm ngừng[]; .
clearInterval[audioPlay] // stops the interval
}];
There is nothing to tell, everything is clear from the comments to the code.
Điều cuối cùng bạn cần tìm hiểu là các nút chuyển đổi bài hát, đó là cách bạn chuyển sang bài hát trước đó.
JavaScript
Tôi nghĩ nó rõ ràng từ các nhận xét, tôi sẽ không giải thích cái gì cái gì. Đây là cách chuyển sang bài hát tiếp theo.
JavaScript
btnNext.addEventListener["click", function[] {
// Check that the treck variable is greater than three
if [treck < 3] { // If so
treck++; // increase it by one
switchTreck[treck]; // Change the song
} else { // Otherwise
treck = 0; // Assign a zero to it
switchTreck[treck]; // Change the song
}
}];
Đó là nơi nó kết thúc, mọi thứ hoạt động tốt và đây là kết quả
Phần kết luận
Trong bài viết này, bạn đã biết cách tạo trình phát âm thanh bằng JavaScript và HTML, tôi nghĩ bạn thích nó.
Cũng phải nói rằng vẫn còn rất nhiều điều cần cải thiện và làm, chẳng hạn như đầu ra của tất cả các bản nhạc hoặc thay đổi âm lượng, v.v.
Nhưng nếu vậy bài viết sẽ rất lớn, theo mình thì không đủ nhỏ nên mình không làm.
Nhưng nếu bạn muốn tinh chỉnh trình phát âm thanh trong JavaScript, hãy tải xuống các tệp của nó và truy cập liên kết này, có mọi thứ bạn cần biết để làm việc với âm thanh trong JS.
JavaScriptSoundPlayerÂm nhạcHtml
Bài báo cáo
Thưởng thức bài viết này?
3
Chia sẻ
emiliabartner
Nhà báo
Tích lũy được nhiều kinh nghiệm viết bài về xu hướng và triển vọng phát triển của ngành game trên thế giới Tôi thấy mình là một Nhà báo tự do. Bây giờ tôi đang viết về blockchain và tiền điện tử