深刻求解答：ios使用audio标签不能播放网络音频 求解决方案！！！
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了深刻求解答：ios使用audio标签不能播放网络音频 求解决方案！！！相关的知识，希望对你有一定的参考价值。
两箭头标反了 网络音频地址请大神自换
1、<audio src="01.mp3">对服务器端的音频文件支持。
2、<audio src="01.mp3">最手机本地的音频文件不支持。
【方法】
1、<video src="test.mp3″ poster="test.jpg" onclick="this.play();"></video>
使用video标签嵌入mp3文件，并添加onclick属性和背景图属性。
2.制作swf文件，嵌入mp3音频，再使用jQuery Flash一类的插件实现html5文件中嵌入音频。
【拓展】
html5有非常方便的audio标签可以嵌入音频文件，而android的webview具有基本的浏览器内核，可以浏览基于html5的文档，但webview对html5的支持目前还是有很大差距的。本回答被提问者采纳
关于html5 audio 标签在ios系统上不能正常自动播放的解决办法
由于 iOS Safari 限制不允许 audio autoplay, 必须用户主动交互(例如 click)后才能播放 audio, 因此我们通过一个用户交互事件来主动 play 一下 audio.
这个坑相信大家都已经踩过了, 在 iOS 9 没出现以前, 这样的 hack 方案还是妥妥的.
但 iOS 9 出现后, 发现这个方案"失效"了.
没有办法, 看来是时候升级一下 hack 方案了, 于是仔细看了下 audio 的事件.
对于能够自动播放时事件的顺序如下
loadstart -> loadedmetadata -> loadeddata -> canplay -> play -> playing
对于不能自动播放时触发的事件因系统版本不同而不同
* iPhone5 iOS 7.0.6 loadstart
* iPhone6s iOS 9.1 loadstart -> loadedmetadata -> loadeddata -> canplay
最终发现相比原来的 hack 方案, 对于 iOS 9 还需要额外的 load 一下, 否则直接 play 不能让 audio 开始播放.
audioEl.load(); // iOS 9
audioEl.play(); // iOS 7/8 仅需要 play 一下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>Fake auto play html audio in iOS Safari the right way</title>
</head>
<body>
<h1>在 iOS Safari 中假装自动播放 HTML5 audio(音乐) 的正确方式</h1>
<p>核心原理: 通过一个用户交互事件来主动 play 一下 audio</p>
<br>
<br>
<br>
<audio id="bgmusic" autoplay preload loop controls></audio>
<script>
(function() {
function log(info) {
console.log(info);
// alert(info);
}
function forceSafariPlayAudio() {
audioEl.load(); // iOS 9 还需要额外的 load 一下, 否则直接 play 无效
audioEl.play(); // iOS 7/8 仅需要 play 一下
}
var audioEl = document.getElementById(‘bgmusic‘);
// 可以自动播放时正确的事件顺序是
// loadstart
// loadedmetadata
// loadeddata
// canplay
// play
// playing
//
// 不能自动播放时触发的事件是
// iPhone5 iOS 7.0.6 loadstart
// iPhone6s iOS 9.1 loadstart -> loadedmetadata -> loadeddata -> canplay
audioEl.addEventListener(‘loadstart‘, function() {
log(‘loadstart‘);
}, false);
audioEl.addEventListener(‘loadeddata‘, function() {
log(‘loadeddata‘);
}, false);
audioEl.addEventListener(‘loadedmetadata‘, function() {
log(‘loadedmetadata‘);
}, false);
audioEl.addEventListener(‘canplay‘, function() {
log(‘canplay‘);
}, false);
audioEl.addEventListener(‘play‘, function() {
log(‘play‘);
// 当 audio 能够播放后, 移除这个事件
window.removeEventListener(‘touchstart‘, forceSafariPlayAudio, false);
}, false);
audioEl.addEventListener(‘playing‘, function() {
log(‘playing‘);
}, false);
audioEl.addEventListener(‘pause‘, function() {
log(‘pause‘);
}, false);
// 由于 iOS Safari 限制不允许 audio autoplay, 必须用户主动交互(例如 click)后才能播放 audio,
// 因此我们通过一个用户交互事件来主动 play 一下 audio.
window.addEventListener(‘touchstart‘, forceSafariPlayAudio, false);
audioEl.src = ‘http://www.w3school.com.cn/i/song.mp3‘;
})();
</script>
</body>
</html>
以上是关于深刻求解答：ios使用audio标签不能播放网络音频 求解决方案！！！的主要内容，如果未能解决你的问题，请参考以下文章
关于html5 audio 标签在ios系统上不能正常自动播放的解决办法
关于html5 audio 标签在ios系统上不能正常自动播放的解决办法
html5 audio 标签autoplay="autoplay"在手机预览网页无法自动播放背景音乐
JavaScript - PC 端通过纯 js 播放音频文件（播放提示音）