Phụ đề cho <audio> với <track>, cách hiển thị phụ đề

Question

Tôi đang cố gắng thêm phiên âm văn bản của tệp âm thanh được nói bằng thẻ theo dõi. Hành vi mặc định cho thẻ video là hiển thị chúng (tác phẩm). Theo mặc định, thẻ âm thanh dường như thiếu một số loại 'canvas' (khu vực màu đen, thẻ video hiển thị ngay cả khi không có video) để hiển thị phụ đề tự động. Tôi có thể sử dụng thẻ video nhưng nó sẽ cảm thấy như một cách giải quyết xấu xí. Tôi không muốn phá vỡ ngữ nghĩa của mã của tôi mặc dù.

Có loại CSS nào để buộc hiển thị khu vực như vậy, nơi các subtiles sẽ được hiển thị không?

<audio controls> 
    <source src="test.ogg" type="audio/ogg"> 
    <source src="test.mp3" type="audio/mpeg"> 
    <track kind="subtitles" label="English subtitles" src="/test.vtt" srclang="en" default></track> 
    Your browser does not support the audio tag. 
</audio> 

Cảm ơn bạn đã đọc.

Answer 1

Thử sử dụng loại = "thuộc tính" trong thẻ theo dõi.

Answer 2

Tôi có yêu cầu tương tự đang cố gắng tạo hiển thị bản ghi phụ đề cho nhật ký âm thanh cho ứng dụng cá nhân. Tôi đang cố gắng tự động cuộn và đánh dấu các cụm từ văn bản dựa trên nhật ký âm thanh. Tôi không tìm thấy phần tử hiển thị chú thích tệp .vtt được đặt trên phần tử vì không có canvas có sẵn tương tự như phần tử video. Và quyết định viết một thành phần vải tùy chỉnh để hiển thị liên kết .vtt trên vùng chứa và tìm thấy bản trình diễn HTML5 Video Caption maker hữu ích này, bạn có thể cho nó một shot.

Answer 3

Có một phần tử giả trong html mà bạn có thể chọn nó trong css để tạo kiểu cho phụ đề hoặc chú thích của bạn. Đó là thành phần ::cue mà bạn có thể cung cấp một số thuộc tính css như color, opacity, font và v.v. Bạn thấy tất cả chúng là các kiểu được sử dụng cho văn bản.
Tôi đã học được những điều này khi tôi đã học cách sử dụng các thẻ video. Nhưng đã có một tìm kiếm trong google và tìm thấy một bài viết rất hữu ích về MDN. Bạn có thể xem mọi thứ về kiểu phụ đề trong here.
Và không có lý do gì để sử dụng plugin;).

Answer 4

Tôi không biết làm thế nào để làm điều này chỉ với CSS, nhưng tôi đã làm một cái gì đó tương tự (tín hiệu tùy chỉnh) với các đoạn văn bản video và JavaScript. Hy vọng rằng bạn sẽ có thể tận dụng các sự kiện TextTrack tương tự để hoàn thành những gì bạn muốn làm với các bản âm thanh.

Bạn có thể liên kết một hàm tùy chỉnh với sự kiện oncuechange của bản nhạc và sau đó sử dụng các activeCues của bản nhạc để tạo phụ đề của riêng bạn. Div tùy chỉnh này sau đó có thể được định vị hoặc theo kiểu nhưng bạn muốn.

Điều này sẽ lấy đoạn văn bản và nhận văn bản từ tín hiệu hiện đang hoạt động mỗi lần xảy ra thay đổi cue.

$('audio')[0].textTracks[0].oncuechange = function() { 
    var currentCue = this.activeCues[0].text; 
    $('#yourCustomCaptions').html(currentCue); 
} 

Sau đó lấy văn bản từ mỗi tín hiệu và đưa văn bản vào div tùy chỉnh bạn muốn hiển thị.

https://developer.mozilla.org/en-US/docs/Web/API/TextTrack