javascript - Can't make HTML5 Audio Tag to work on mobile browsers - Stack Overflow

admin管理员组

文章数量:1391975

I have a web app that uses the HTML5 <audio> tag and for some reason, while it works fine on Windows and Mac PCs, it doesn't work on iOS and Android. Here's a relevant snippet of my code:

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>

I have a web app that uses the HTML5 <audio> tag and for some reason, while it works fine on Windows and Mac PCs, it doesn't work on iOS and Android. Here's a relevant snippet of my code:

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>

• javascript
• android
• ios
• html
• audio

Share Improve this question Follow edited Jun 29, 2016 at 21:27 Zach Saucier 26.1k1212 gold badges9898 silver badges159159 bronze badges asked Feb 14, 2015 at 11:39 Pavel ZagalskyPavel Zagalsky 1,64677 gold badges2424 silver badges5757 bronze badges 2

• what browser you tested the code with ? i it opera it will not work – Sky Walker Commented Feb 14, 2015 at 11:41
• Chrome and Safari on iOS and Android – Pavel Zagalsky Commented Feb 14, 2015 at 11:41

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

You normally can't autoplay audio or video files on mobile devices, this is often a restriction by the OSes such as Android and iOS to stop sites from downloading huge media files and autoplaying them.

If such code is called from within a click or touch handler, it will probably work, but not the way you are currently doing it.

Also, the <center> element has been deprecated and you shouldn't use it anymore.

Not sure if this helps but I did this instead and it worked for me. While I am not playing an MP3 I am getting a voice to prompt the user through a loop.

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);
}

// insert this bottom bit to call the function and it will read in the mobiles native voice what you type in ie....rest works on android have not tried iphone.

speak('rest');

Have you tried it doing this way :

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

本文标签： javascriptCan39t make HTML5 Audio Tag to work on mobile browsersStack Overflow