Độ trễ HTML 5 âm thanh .play() trên thiết bị di động

Question

Tôi vừa tạo ứng dụng thời gian thực bằng socket.io nơi người dùng "chính" có thể kích hoạt âm thanh khi nhận thiết bị (trình duyệt trên máy tính, trình duyệt trên thiết bị di động). Người dùng chính đó thấy danh sách tệp âm thanh và có thể nhấp vào "Phát" trên tệp âm thanh.

Phát lại âm thanh ngay lập tức trên trình duyệt. Tuy nhiên, trên điện thoại di động, có sự chậm trễ 0,5-2 giây (Nexus 4 và iPhone 5 của tôi khoảng 1 giây và iPhone 3GS 1-2 giây).

Tôi đã thử một số cách để tối ưu hóa phát lại âm thanh để làm cho nó nhanh hơn trên điện thoại di động. Ngay bây giờ (ở "giai đoạn" tốt nhất của tối ưu hóa của nó tôi muốn nói), tôi kết hợp tất cả các mp3 với nhau trong một tập tin âm thanh (nó tạo ra các tập tin .mp3, .ogg, và .mp4). Tôi cần ý tưởng về cách tôi có thể khắc phục/cải thiện vấn đề này nữa. Các nút cổ chai thực sự có vẻ là trong các phương pháp âm thanh hmtl 5 như .play().

Trên thu tôi sử dụng như vậy:

<audio id="audioFile" preload="auto"> 
    <source src="/output.m4a" type="audio/mp4"/> 
    <source src="/output.mp3" type="audio/mpeg"/> 
    <source src="/output.ogg" type="audio/ogg"/> 
    <p>Your browser does not support HTML5 audio.</p> 
</audio> 

Trong JS của tôi:

var audioFile = document.getElementById('audioFile'); 

    // Little hack for mobile, as only a user generated click will enable us to play the sounds 
    $('#prepareAudioBtn').on('click', function() { 
    $(this).hide(); 
    audioFile.play(); 
    audioFile.pause(); 
    audioFile.currentTime = 0; 
    }); 

// Master user triggered a sound sprite to play 
socket.on('playAudio', function (audioClip) { 
    if (audioFile.paused) 
    audioFile.play(); 

    audioFile.currentTime = audioClip.startTime; 

    // checks every 750ms to pause the clip if the endTime has been reached. 
    // There is a second of "silence" between each sound sprite so the pause is sure to happen at a correct time. 
    timeListener(audioClip.endTime); 
}); 

function timeListener(clipEndTime) { 
    this.clear = function() { 
    clearInterval(interval); 
    interval = null; 
    }; 

    if (interval !== null) { 
    this.clear(); 
    } 

    interval = setInterval(function() { 
    if (audioFile.currentTime >= clipEndTime) { 
     audioFile.pause(); 
     this.clear(); 
    } 
    }, 750); 
} 

Cũng coi blob cho mỗi âm thanh nhưng một số âm thanh có thể đi cho phút vì vậy đó là lý do tại sao tôi phải viện đến cách kết hợp tất cả âm thanh cùng nhau cho 1 tệp âm thanh lớn (tốt hơn một số thẻ audio trên trang cho mỗi clip)

Answer 1

Thiết lập của bạn hoạt động tốt trên máy tính để bàn vì preload thuộc tính.

Thật không may, đây là Apple on the subject of preload:

Safari trên iOS bao giờ sự cài đặt trước.

Và đây là MDN:

Lưu ý: Giá trị này thường bị bỏ qua trên nền tảng di động.

Các nền tảng di động đang làm cho một sự cân bằng để tiết kiệm pin và sử dụng thông tin truyền thông tải chỉ khi nó thực sự tương tác với người sử dụng bởi hoặc theo trình tự chơi (autoplay thường không hoạt động vì lý do tương tự).

Tôi nghĩ điều tốt nhất bạn nên làm là kết hợp các tuyến đường của bạn với nhau, như bạn đã nói, vì vậy bạn không phải trả chi phí nạp ban đầu nhiều.

Answer 2

Thay vì tạm dừng/phát, tôi chỉ cần đặt âm lượng là 0 khi không phát và quay lại 1 khi phát. Các phương pháp AudiocurrentTime và volume không làm chậm phát lại âm thanh ngay cả trên iPhone 3GS.

Tôi cũng đã thêm thuộc tính 'vòng lặp' vào phần tử âm thanh để nó không bao giờ phải được .play() 'chỉnh sửa lại.

Thật là hiệu quả khi kết hợp tất cả âm thanh mp3 với nhau vì giải pháp này có thể hoạt động vì điều đó.

Chỉnh sửa: audioElement.muted = true hoặc audioElement.muted = false có ý nghĩa hơn.

Chỉnh sửa2: Không thể kiểm soát khối lượng thay mặt người dùng trên iOS vì vậy tôi phải tạm dừng() và phát() phần tử âm thanh thay vì chỉ tắt tiếng và bật tiếng.