Preface
Recently, I am working on a mobile project. I need to match a piece of background music for H5 and play it automatically. Just add the automatic playback code in the previous method, but there is a small episode (covering my face). I won’t say much below, let’s take a look at the detailed introduction together.
Mobile audio playback code
css
.pause { position: absolute; z-index: 10000; bottom: 10px; right: 10px;}
.pause a { width:30px; height:30px; background:url(/zj/maxbao/reai/imgs/) 0 0 no-repeat; display:block; background-size: 90px auto;}
.pause { -webkit-animation:reverseRotataZ 1.2s linear infinite}
.pause { }
.pause span{ color: #fff; font-size: 16px; position:absolute; left:-40px; top:5px; text-shadow:1px 1px 1px #000; letter-spacing:2px; -webkit-transition:all .2s linear; opacity:0; -webkit-transform:translateX(-20px) }
.pause -show { opacity:1; -webkit-transform:translateX(0px)}
.coffee-steam-box { -webkit-transform:translate(-40px,-40px)}
@-webkit-keyframes reverseRotataZ {
0% {
-webkit-transform:rotateZ(0deg)
}
100% {
-webkit-transform:rotateZ(-360deg)
}
}
.audio{position: absolute; z-index:10; visibility: hidden; opacity: 0; left: 0px; top:0px; width: 100px ; height: 30px;}
html
<div class="pause"> <a class="on" href="#" rel="external nofollow" > </a> <span>Open</span> </div> <div class="audio"> <audio src="/ln/images/2016zt/12Dec/dlsdbm/music.mp3" controls="controls" preload="auto" autoplay="autoplay" loop></audio> </div>
javascript
//Player(function($) {
$(document).ready(function() {
var musicControl = function(obj){
var classname = $.trim(('class'));
//alert(classname);
if (classname == 'on')
{
('audio').pause();
('on').addClass('off');
('span').text('closure');
$('.pause span').addClass('z-show');
$('.music-icon').removeClass('active');
setTimeout(function(){
$('.pause span').removeClass('z-show');
},500);
} else if (classname == 'off')
{
('audio').play();
('off').addClass('on');
('span').text('Open');
$('.music-icon').addClass('active');
$('.pause span').addClass('z-show');
setTimeout(function(){
$('.pause span').removeClass('z-show');
},500);
};
return false;
}
$('.pause a').click(function ()
{
musicControl($(this));
});
var audio = ('audio');
();
$(document).one("touchstart",
function() {
()
})
});
})(jQuery);
Problem resolution
After adding it, I browsed the page with WeChat (iOS system) and found that it was not automatically played. Clicking pause and clicking again to play it normally. This means there is no problem with the playback function. The page cannot be played automatically after opening it with the iOS browser Safari. In previous years, this code has been used. Is it not working all the time? Then I opened the page with an Android phone and it could play automatically, which proves that the code itself is not problematic. I then looked up the relevant literature because iOS Safari restricts audio autoplay, and the user must actively interact (such as click) before audio can be played. Therefore, we should be able to solve the problem by actively playing audio through a user interaction event. The code is as follows:
('idName').play();
At this time, Safari can play automatically, but I found that it was still not possible in WeChat. Could it be that WeChat did what to do? Modify the code as follows:
<script src="/open/js/jweixin-1.0."></script>
<script>
//Under normal circumstances, this can automatically play, but some weird iPhones cannot ('idName').play();
//WeChat must be added to WeixinJSBridgeReady for Weixin JSAPI to take effect ("WeixinJSBridgeReady", function () {
('idName').play();
('video').play(); //Video plays automatically }, false);
</script>
At this point, the problem of automatic playback has been perfectly solved. In fact, it is not necessarily a bad thing for the problem of not allowing automatic playback of audio videos, because you think that after all, everyone's traffic is so expensive. An audio video can often only cost a few MB or even dozens of MB or dozens of MB. The automatic playback traffic will be out instantly, and it is too late to cry. Therefore, if it is not necessary, it is better not to play automatically. Leave it to the user to choose whether to listen or not.
Summarize
The above is the entire content of this article. I hope that the content of this article has a certain reference value for everyone's study or work. If you have any questions, you can leave a message to communicate. Thank you for your support.