Không thể tạo Thẻ âm thanh HTML5 hoạt động trên trình duyệt di động

Question

Tôi có một ứng dụng web sử dụng thẻ HTML5 <audio> và vì một số lý do, trong khi nó hoạt động tốt trên Windows và Mac PC, nó không hoạt động trên iOS và Android . Dưới đây là một đoạn có liên quan của mã của tôi:

Javascript:

var audioElement = document.querySelector('#audioplayer'); 
var source = document.querySelector('#mp3'); 
source.src = tokObject._url; 
audioElement.load(); 
audioElement.play(); 

HTML:

<center> 
    <audio id="audioplayer" style="width:480px;"> 
     <source id="mp3" src="random-placeholder" type="audio/mp3" /> 
    </audio> 
</center> 

Answer 1

Các bạn đã thử nó làm theo cách này:

var aud=new Audio(file.mp3); 
aud.play(); 

Answer 2

Bạn thường có thể' t tự động phát tệp âm thanh hoặc video trên thiết bị di động, điều này thường là hạn chế của các hệ điều hành như Androi d và iOS để ngăn các trang web tải xuống các tệp phương tiện khổng lồ và tự động phát chúng.

Nếu mã như vậy được gọi từ bên trong trình xử lý nhấp chuột hoặc chạm, nó có thể hoạt động, nhưng không phải cách bạn hiện đang thực hiện.

Ngoài ra, phần tử <center> đã không còn được dùng nữa và bạn không nên sử dụng nó nữa.

Answer 3

Không chắc chắn điều này có giúp ích hay không nhưng tôi đã thực hiện việc này thay thế và nó đã hiệu quả đối với tôi. Trong khi tôi không chơi một MP3, tôi đang nhận được một giọng nói để nhắc nhở người dùng thông qua một vòng lặp.

function speak(text) { 
var msg = new SpeechSynthesisUtterance(); 
var voices = speechSynthesis.getVoices(); 
msg.voice = voices[2]; 
msg.voiceURI = 'native'; 
msg.volume = 1; 
msg.rate = 1; 
msg.pitch = 1; 
msg.text = text; 
msg.lang = 'en-US'; 

speechSynthesis.speak(msg); 
} 

// chèn bit dưới cùng này để gọi hàm và nó sẽ đọc bằng giọng nói gốc điện thoại di động mà bạn nhập tức là .... phần còn lại hoạt động trên android chưa thử iphone.

nói ('nghỉ');