Bắt đầu vùng chọn trên bản phát âm

Question

Tôi đang cố gắng tìm ra cách để đặt thẻ thời gian thành thẻ marquee trong html. Toàn bộ ý tưởng là hiển thị phụ đề của một bài hát ở định dạng marquee và chỉ bắt đầu vùng chọn khi người dùng nhấp để bắt đầu âm thanh.

Tôi đang sử dụng đoạn mã sau để chơi các tập tin âm thanh, (trong html-5)

<audio controls="controls" loop="loop"> 
    <source src="song.ogg" type="audio/ogg" /> 
    <source src="song.mp3" type="audio/mpeg" /> 
    Your browser does not support the audio element.Please use chrome. 
</audio> 

gì tôi đang làm là thiết lập tập tin âm thanh này trên autoplay, và chúng ta hãy bắt đầu marquee tại thời điểm tải trang (là cài đặt mặc định) nhưng điều này hoạt động tốt trên mạng tốc độ cao, đối với mạng tốc độ thấp, sự cố phát sinh là tải nội dung âm thanh bị trì hoãn và do đó văn bản marquee bắt đầu chạy trước âm thanh. không phải là mát mẻ

Vui lòng tư vấn cho tôi cách tôi có thể thực hiện giải pháp cho vấn đề này thông qua javascript?

Answer 1

Tôi không chắc chắn cách bạn bắt đầu thẻ marquee, nhưng bạn nên đợi play - Sự kiện của phần tử âm thanh của bạn để làm như vậy. Tự động phát kích hoạt sự kiện này khi phần tử bắt đầu phát.

Lưu ý rằng thẻ marquee không còn được dùng nữa, tôi sẽ sử dụng chuyển tiếp css thay thế, có thể dễ dàng kích hoạt để bắt đầu bằng cách thêm một className cụ thể.

Cho bạn phương tiện truyền thông-Yếu tố một id, vì vậy bạn có thể dễ dàng truy cập vào nó với javascript:

<audio id="audio" controls="controls" loop="loop"> 
    <source src="song.ogg" type="audio/ogg" /> 
    <source src="song.mp3" type="audio/mpeg" /> 
    Your browser does not support the audio element.Please use chrome. 
</audio> 

Và JavaScript - Mã số:

var audioEl = document.getElementById("audio"); 

audioEl.addEventListener('play',function(){ 
    //start your marquee in here 
}); 

Bạn có thể tìm thấy tất cả các sự kiện được hỗ trợ bởi các yếu tố truyền thông trên W3C-Page với mô tả về thời điểm chúng được kích hoạt. Điều này cung cấp cho bạn tổng quan về cách bạn có thể tương tác với các phần tử phương tiện trong javascript.

Answer 2

http://jsfiddle.net/kykMs/1/

Đặt tiêu đề bài hát của bạn trong một span ban đầu:

<span id="song">Artist - Song Title</span> 

Sau đó, trên tải trang thay thế nó với marquee:

window.onload = function() { 
    var elem = document.getElementById("song"); 

    var marq = document.createElement('marquee'); 
    marq.innerHTML = elem.innerHTML; 

    document.getElementById("player").removeChild(elem); 
    document.getElementById("player").appendChild(marq); 
}