HTML phát âm thanh

Kiếm thu nhập với kỹ năng HTML của bạn

Đăng ký và chúng tôi sẽ gửi cho bạn những cơ hội làm việc tự do tốt nhất ngay trong hộp thư đến của bạn
Chúng tôi đang xây dựng thị trường làm việc tự do tự phục vụ lớn nhất cho những người như bạn

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

<audio id="audio" src="./audio/treck1.mp3" controls></audio>

Đâ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 đề, 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 là không đủ, vì vậy chúng tôi sẽ xóa thuộc tính điều khiển
Vì bây giờ chúng tôi có một màn hình trống, chúng tôi sẽ thêm các nút để điều khiển, đồng thời là thẻ cho các bản âm thanh
XHTML

<div id="controls">
    <div class="audio-track"><div class="time"></div></div>
    <button class="play">Play</button>
    <button class="pause">Pause</button>
    <button class="prev">&#60;prev</button>
    <button class="next">next&#62;</button>
</div>

Let's break it down, < div> with the class audio-track, this is the audio track, inside it there is a < div> with the class time, this is the remainder of how long there is left to finish.
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ư sang nú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à những gì đã xuất hiện

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ư đ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 phần tử 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

Here we just take the elements we will work with, we take the < audio> element through the id and the rest through the selector.
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 phải gán giá trị cho một biến lúc tải trang mà không phải lúc 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ó để chuyển bài.
Bây giờ hãy chuyển sang chức năng chuyển đổi 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 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
Cái 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 số lượng bài hát đã phát và chỉ định điều này
Một điều kiện mà 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, rằng nó nhỏ hơn ba, điều cần thiết là giá trị của nó không lớn hơn chỉ số mảng và
Nếu điều kiện đúng thì tăng biến treck và thay đổi bài hát bằng hàm switchTreck
Nếu không, một lần nữa, chúng tôi kiểm tra xem bài hát đã kết thúc chưa, nhưng bây giờ chúng tôi tìm biến treck lớn hơn hoặc bằng ba, nếu đúng, chúng tôi gán nó bằng 0 và cũng thay đổi bản nhạc
Bước tiếp theo là xử lý nút tạm dừng
JavaScript
1
2
3
4 btnTạm dừng. addEventListener("click", function() {
âm thanh. tạm ngừng();
clearInterval(audioPlay) // dừng quãng
});
Không có gì để nói, mọi thứ đều rõ ràng từ comment đến code
Điều cuối cùng bạn cần tìm ra là các nút chuyển bài hát, đó là cách bạn chuyển sang bài trước
JavaScript

btnPrev.addEventListener("click", function() {
    // Check that the treck variable is greater than zero
    if (treck > 0) {
        treck--; // If true, reduce the variable by one
        switchTreck(treck); // Change the song.
    } else { // Otherwise
        treck = 3; // Assign three
        switchTreck(treck); // Change the song
    }
});

Tôi nghĩ rằng nó rõ ràng từ các bình luận, tôi sẽ không giải thích những gì. Đây là cách chuyển sang bài hát tiếp theo
JavaScript

Đó 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 cần phải nói rằng vẫn còn rất nhiều điều cần phải 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 như vậy bài viết sẽ rất lớn, theo tôi là không đủ nhỏ nên tôi 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áo cáo

Thưởng thức bài viết này?

3

Chia sẻ

emiliabartner

Nhà báo