针对微信无法自动播放问题

86 阅读 0 评论 57 点赞

我是靠谱客的博主鲤鱼芝麻，这篇文章主要介绍针对微信无法自动播放问题，现在分享给大家，希望可以做个参考。

由于微信浏览器时不时出现无法自动播放音乐的问题，比如7.0.8及现在的7.0.15,都无法播放音乐。

替代方案：

复制代码

1
2
3
4
5
6
<!--music start-->
<aside class="media-wrap on">
<img class="music_on" src="images/music_Light_on.png" alt="">
<img class="music_off" src="images/music_Light_off.png" alt="">
</aside>
<audio id="autoplay" src="music.mp3"></audio>

复制代码

1
2
3
4
function onDomReady() {
musicSwitch();
console.log('DOM is ready');
}

复制代码

// 音乐切换
function musicSwitch() {
var mediaWrap = document.querySelector('.media-wrap');
var audio = document.querySelector('#autoplay');
var musicOn = document.querySelector('.music_on');
var musicOff = document.querySelector('.music_off');
var AudioContext = window.AudioContext || window.webkitAudioContext;
var audioCtx = new AudioContext();
// IOS策略，无法自动播放，只能使用原来的方式播放
var isUseAudioCtx = AudioContext && !/(i[^;]+;( U;)? CPU.+Mac OS X/gi.test(navigator.userAgent);
// var isUseAudioCtx = AudioContext;
var url = audio.getAttribute('src');
var isPalying = true;
if (isUseAudioCtx) {
loadSound(url, audioCtx);
} else {
document.addEventListener(
'WeixinJSBridgeReady',
function() {
audio.play();
},
false
);
audio.play();
$('#autoplay').on('ended', function() {
this.load();
this.play();
});
}
mediaWrap.addEventListener(
'click',
function() {
if (isUseAudioCtx) {
if (audioCtx.state === 'suspended') {
audioCtx.resume();
isPalying = true;
} else {
audioCtx.suspend();
isPalying = false;
}
} else {
if (audio.paused) {
audio.play();
isPalying = true;
} else {
audio.pause();
isPalying = false;
}
}
if (isPalying) {
mediaWrap.classList.add('on');
musicOn.style.display = 'block';
musicOff.style.display = 'none';
} else {
mediaWrap.classList.remove('on');
musicOn.style.display = 'none';
musicOff.style.display = 'block';
}
},
false
);
}
function loadSound(url, context) {
var request = new XMLHttpRequest();
request.open('GET', url, true);
request.responseType = 'arraybuffer';
// Decode asynchronously
var onError = function(e) {
console.log(e);
};
request.onload = function() {
context.decodeAudioData(
request.response,
function(buffer) {
playSound(buffer, context);
},
onError
);
};
request.send();
}
function playSound(buffer, context) {
var source = context.createBufferSource();
source.buffer = buffer;
source.connect(context.destination);
source.start(0);
source.loop = true;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
// 音乐切换
function musicSwitch() {
var mediaWrap = document.querySelector('.media-wrap');
var audio = document.querySelector('#autoplay');
var musicOn = document.querySelector('.music_on');
var musicOff = document.querySelector('.music_off');
var AudioContext = window.AudioContext || window.webkitAudioContext;
var audioCtx = new AudioContext();
// IOS策略，无法自动播放，只能使用原来的方式播放
var isUseAudioCtx = AudioContext && !/(i[^;]+;( U;)? CPU.+Mac OS X/gi.test(navigator.userAgent);
// var isUseAudioCtx = AudioContext;
var url = audio.getAttribute('src');
var isPalying = true;
if (isUseAudioCtx) {
loadSound(url, audioCtx);
} else {
document.addEventListener(
'WeixinJSBridgeReady',
function() {
audio.play();
},
false
);
audio.play();
$('#autoplay').on('ended', function() {
this.load();
this.play();
});
}
mediaWrap.addEventListener(
'click',
function() {
if (isUseAudioCtx) {
if (audioCtx.state === 'suspended') {
audioCtx.resume();
isPalying = true;
} else {
audioCtx.suspend();
isPalying = false;
}
} else {
if (audio.paused) {
audio.play();
isPalying = true;
} else {
audio.pause();
isPalying = false;
}
}
if (isPalying) {
mediaWrap.classList.add('on');
musicOn.style.display = 'block';
musicOff.style.display = 'none';
} else {
mediaWrap.classList.remove('on');
musicOn.style.display = 'none';
musicOff.style.display = 'block';
}
},
false
);
}
function loadSound(url, context) {
var request = new XMLHttpRequest();
request.open('GET', url, true);
request.responseType = 'arraybuffer';
// Decode asynchronously
var onError = function(e) {
console.log(e);
};
request.onload = function() {
context.decodeAudioData(
request.response,
function(buffer) {
playSound(buffer, context);
},
onError
);
};
request.send();
}
function playSound(buffer, context) {
var source = context.createBufferSource();
source.buffer = buffer;
source.connect(context.destination);
source.start(0);
source.loop = true;
}