H5页面解决IOS进入不自动播放问题(微信内)

时间:2023-03-09 07:17:01
H5页面解决IOS进入不自动播放问题(微信内)

废话少说,直接上代码。

主要还是调用微信的jdk做兼容处理。,安卓可自动播放。

($(function(){
$(function(){
/*
**
复选框*/

$('.ul-radio').on('click','li',function(){
$(this).addClass('li-on').siblings().removeClass('li-on');
});
//我知道了 按钮隐藏
$('.i-know').bind('click',function(e){
e.preventDefault();
$('#alert-content,#shadow, .lihua').hide();

});
getSong();

});
function toPercent(data){
var strData = parseFloat(data)*100;
var ret = strData.toString()+"%";
return ret;
}
var allTime , currentTime;
//获取歌曲链接并插入dom中
function getSong() {
var audio = document.getElementById("con-music");
audio.src="/output2/questionnaire/xn-images/audio1.mp3";
audio.loop = true; //歌曲循环
playCotrol(); //播放控制函数

}
//点击播放/暂停
function clicks() {
var audio = document.getElementById("con-music");
$('.icon-music').on('click',function(){
if($(this).hasClass('stop-music')){
$(this).removeClass('stop-music');
$('.img-CD').addClass('cd-rotate');
$('#con-music')[0].play();
dragMove();//并且滚动条开始滑动
}else{
$(this).addClass('stop-music');
$('.img-CD').removeClass('cd-rotate');
$('#con-music')[0].pause();
}
});

}

//播放时间
function timeChange(time, timePlace) {//默认获取的时间是时间戳改成我们常见的时间格式
var timePlace = document.getElementById(timePlace);
//分钟
var minute = time / 60;
var minutes = parseInt(minute);
if (minutes < 10) {
minutes = "0" + minutes;
}
//秒
var second = time % 60;
seconds = parseInt(second);
if (seconds < 10) {
seconds = "0" + seconds;
}
var allTime = "" + minutes + "" + ":" + "" + seconds + "";
timePlace.innerHTML = allTime;
}

//播放事件监听

function playCotrol() {
var audio = document.getElementById("con-music");
audio.addEventListener("loadeddata", //歌曲一经完整的加载完毕( 也可以写成上面提到的那些事件类型)
function() {
// $("#con-music").addClass("").removeClass("color_gray");
// addListenTouch(); //歌曲加载之后才可以拖动进度条
allTime = audio.duration;

// timeChange(allTime, "allTime");
setInterval(function() {
currentTime = audio.currentTime;
var lineWidth=(currentTime/allTime);
// console.log(toPercent(lineWidth));
var lineW=toPercent(lineWidth);
$('.red-line').css('width',lineW)
// console.log(lineWidth*100%);
timeChange(currentTime, "currentTime");
timeChange(allTime, "allTime");
}, 1000);
clicks();
}, false);

audio.addEventListener("pause",
function() { //监听暂停
$(".icon-music").addClass("stop-music");
// $("#control").html("点击播放");
if (audio.currentTime == audio.duration) {
audio.stop();
audio.currentTime = 0;
}
}, false);
audio.addEventListener("play",
function() { //监听播放
$(".icon-music").removeClass("stop-music");
// $("#control").html("暂停播放");
// dragMove();
}, false);

audio.addEventListener("ended", function() {
alert(0)
}, false)
}

function is_weixn(){
var ua = navigator.userAgent.toLowerCase();
if(ua.match(/MicroMessenger/i)=="micromessenger") {
return true;
} else {
return false;
}
}
if(is_weixn()){
wx.ready(function() {
document.getElementById('con-music').play();
autoPlayAudio1();
});
}else{
document.getElementById("con-music").play();
}
}))
// 等待30s
var countDown = 30;
function nextQuestion(obj)
{
// alert(8989);
if (countDown == 0)
{
obj.find('.gray-bg').hide();
obj.find('input[type=submit]').show();
}
else
{
obj.find('input[type=submit]').hide();
obj.find('.sec').text(countDown+'s');
--countDown;
}
setTimeout(function(){
nextQuestion(obj)
},1000)
}
var obj = $('#next');
nextQuestion(obj);

function autoPlayAudio1() {
wx.config({
// 配置信息, 即使不正确也能使用 wx.ready
debug: false,
appId: '',
timestamp: 1,
nonceStr: '',
signature: '',
jsApiList: []
});
wx.ready(function() {
document.getElementById('con-music').play();
});
}
/*复选框*/
$('.ul-radio').on('click','li, input ',function(){
$(this).addClass('li-on').siblings().removeClass('li-on');
$(this).find('input[type=radio]').attr('checked','checked');
$(this).siblings().find('input[type=radio]').removeAttr('checked');
});

$('.i-know').bind('click',function(e){
e.preventDefault();
$('#alert-content,#shadow').hide();
});

$('#btn-submit').click(function(){
console.log($("input[name='join_help']:checked").length);
console.log($("input[name='join_clear']:checked").length);

var join_help = $("input[name='join_help']:checked").val(),
join_clear = $("input[name='join_clear']:checked").val();
if (!join_help || !join_clear)
{
$('#alert-content,#shadow').show();
return false;
}
else
{
$.ajax({
url:"<?=Url::to(['questionnaire/save-form'])?>",
type:'post',
dataType:'json',
data:{
_csrf: "<?= Yii::$app->request->csrfToken?>",
'join_help':join_help,
'join_clear':join_clear,
'join_source':'1',
'join_url':'<?=\yii\helpers\Html::encode(Yii::$app->request->getAbsoluteUrl());?>',
'join_type':'101',
'join_scenario':'one'
},
success:function(data)
{
if (data.state === 1)
{
window.location.href = '<?=Url::to('/questionnaire/combine-survey');?>';
}
else
{
alert(data.message);
}
}
})
}
})
</script>