html 5 audio iphone,ipd,safariが自動的に再生できない問題を解決
20141 ワード
html audioがiPhone、ipd、safariブラウザで再生できないのは理由があります(safri on iosではユーザーのインタラクティブな動作を待ってからメディアを再生できることを明確に指摘しています.つまり、ユーザーのactionを得ずに再生するとsafriにブロックされます)
多くの资料を探してすべて解决していないで、しかし最后に国外のウェブサイトで翻訳を通じて问题を解决して、この问题を解决していない子供の靴を助けることができることを望みます
付属のソースコードは以下の通りです:黒い部分は重点が際立っていることを示します
方式2:
著作権は作者の所有で、いかなる形式の転載は作者に連絡してください.作者:U_U(豆弁由来)ソース:https://www.douban.com/note/527250492/akeauto play html audio in iOS Safari the right way iOS Safari制限でaudio autoplayは許可されていないため、ユーザーがアクティブにインタラクティブ(例えばclick)してからaudioを再生する必要があるため、ユーザーインタラクティブイベントを通じてaudioをアクティブにプレイする.この穴はみんなが踏んだと信じています.iOS 9が現れない前に、このようなhack案は妥当でした.しかしiOS 9が現れた後、この案は「失効した」ことに気づいた.仕方なく、hack案をアップグレードする時が来たようで、audioの事件をよく見ました.自動再生可能なイベントの順序は、以下の通りです.loadstart->loadedmetadata->loadeddata->canplay->play->playing自動再生できない場合にトリガーされるイベントはシステムバージョンによって異なります.*iPhone 5 iOS 7.0.6 loadstart*iPhone 6 s iOS 9.1 loadstart->loaddmetadata->loadeddata->canplay最終的には、元のhackスキームよりもiOS 9では追加のloadが必要です.そうしないと、直接プレイしてaudioを再生することはできません. audioEl.load();//iOS 9 audioEl.play();//iOS 7/8はプレイするだけです
転載先:https://www.cnblogs.com/interdrp/p/4211883.html
多くの资料を探してすべて解决していないで、しかし最后に国外のウェブサイトで翻訳を通じて问题を解决して、この问题を解决していない子供の靴を助けることができることを望みます
付属のソースコードは以下の通りです:黒い部分は重点が際立っていることを示します
var g_audio = window.g_audio = new Audio(); // audio
var g_event = window.g_event = new
function() {
var events = ['load', 'abort', 'canplay', 'canplaythrough', 'durationchange', 'emptied', 'ended', 'error', 'loadeddata', 'loadedmetadata', 'loadstart', 'pause', 'play', 'playing', 'progress', 'ratechange', 'seeked', 'seeking', 'stalled', 'suspend', 'timeupdate', 'volumechange', 'waiting', 'mediachange'];
g_audio.loop = false;
g_audio.autoplay = true;
g_audio.isLoadedmetadata = false;
g_audio.touchstart = true;
g_audio.audio = true;
g_audio.elems = {};
g_audio.isSupportAudio = function(type) {
type = type || "audio/mpeg";
try {
var r = g_audio.canPlayType(type);
return g_audio.canPlayType && (r == "maybe" || r == "probably")
} catch(e) {
return false;
}
};
g_audio.push = function(meta) {
g_audio.previousId = g_audio.id;
g_audio.id = meta.song_id;
g_audio.previousSrc = g_audio.src;
g_audio.previousTime = 0.00;
g_audio.src = g_audio.currentSrc = meta.song_fileUrl;
g_audio.isLoadedmetadata = false;
g_audio.autobuffer = true;
g_audio.load();
g_audio.play();
if (g_audio.previousSrc !== g_audio.src) {
g_audio.play();
}
};
for (var i = 0,
l = events.length; i < l; i++) { (function(e) {
var fs = [];
this[e] = function(fn) {
if (typeof fn !== 'function') {
for (var k = 0; k < fs.length; k++) {
fs[k].apply(g_audio);
}
return;
}
fs.push(fn);
g_audio.addEventListener(e,
function() {
fn.apply(this);
});
};
}).apply(this, [events[i]]);
}
this.ended(function() { //
});
this.load(function() { //
this.pause();
this.play();
});
this.loadeddata(function() {
this.pause();
this.play();
});
this.loadedmetadata(function() {
this.isLoadedmetadata = true;
});
this.error(function() { //
});
this.pause(function() { //
});
this.play(function() { //
});
};
$$$$(document).ready(function() {
if (/i(Phone|P(o|a)d)/.test(navigator.userAgent)) {
$$$$(document).one('touchstart',
function(e) {
g_audio.touchstart = true;
g_audio.play();
g_audio.pause();
return false;
});
}
});
audio : $$$$("#main").unbind("click").bind("click",
function() {
//gid id, ，
//song_fileUrl : ， ，
g_audio.elems["id"] = gid;
g_audio.push({
song_id: gid,
song_fileUrl: json.URL
});
}); // 方式2:
著作権は作者の所有で、いかなる形式の転載は作者に連絡してください.作者:U_U(豆弁由来)ソース:https://www.douban.com/note/527250492/akeauto play html audio in iOS Safari the right way iOS Safari制限でaudio autoplayは許可されていないため、ユーザーがアクティブにインタラクティブ(例えばclick)してからaudioを再生する必要があるため、ユーザーインタラクティブイベントを通じてaudioをアクティブにプレイする.この穴はみんなが踏んだと信じています.iOS 9が現れない前に、このようなhack案は妥当でした.しかしiOS 9が現れた後、この案は「失効した」ことに気づいた.仕方なく、hack案をアップグレードする時が来たようで、audioの事件をよく見ました.自動再生可能なイベントの順序は、以下の通りです.loadstart->loadedmetadata->loadeddata->canplay->play->playing自動再生できない場合にトリガーされるイベントはシステムバージョンによって異なります.*iPhone 5 iOS 7.0.6 loadstart*iPhone 6 s iOS 9.1 loadstart->loaddmetadata->loadeddata->canplay最終的には、元のhackスキームよりもiOS 9では追加のloadが必要です.そうしないと、直接プレイしてaudioを再生することはできません. audioEl.load();//iOS 9 audioEl.play();//iOS 7/8はプレイするだけです
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 waytitle>
head>
<body>
<h1> iOS Safari HTML5 audio( ) h1>
<p> : play audiop>
<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>転載先:https://www.cnblogs.com/interdrp/p/4211883.html