当前位置：网站首页>Solve the problem of invalid audio autoplay

Solve the problem of invalid audio autoplay

2022-06-23 10:26:00 【Skin kid LS】

Catalog

Problem description
terms of settlement 1
terms of settlement 2
terms of settlement 3
terms of settlement 4
terms of settlement 5

Problem description

stay 360 perhaps qq browser ,audio The autoplay attribute of is currently valid , Web page body After inserting the following code , Open the page and the music will be played automatically .

<audio autoplay="autoplay" loop="loop" preload="auto" src="http://music.163.com/song/media/outer/url?id=1337065812.mp3">
</audio>

however Edge、 Google and other browsers do not support automatic music playback , It's usually wrong .
Uncaught (in promise) DOMException: play() failed because the user didn’t interact with the document first.
Insert picture description here
Let's take a look at what Google Chrome says .（ Automatically translated to Chinese ）https://goo.gl/xX8pDD

Of course, some solutions are proposed below , Here are a few solutions I've tested .

terms of settlement 1

It is also said that you can always allow silent automatic playback , The user can go through Click the button to make it play , This method is used by many platforms .（ For example, browsing a web page b Stop video , You need to click the play audio button to play the audio ）
stay body The following code can be inserted .（ You need to find a button style ）

<video id="video" muted autoplay src="http://music.163.com/song/media/outer/url?id=1337065812.mp3"></video>
<button type="button" id="unmuteButton">Click Me!</button>
<script> unmuteButton.addEventListener('click', function() {
       video.muted = false; }); </script>

One problem with this method is that the audio is always playing silently , You don't know the progress , When you click the button, the audio may have played for a few seconds .

terms of settlement 2

Use the external chain player of Netease cloud music , Search a song on the official Netease cloud website and enter the play page , Click to generate external player .
Insert picture description here
Use iframe plug-in unit , Copy code .

But be careful , In code src It's incomplete , You need to add http:

<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="http://music.163.com/outchain/player?type=2&id=1464325108&auto=1&height=66" style="top:0px;position:absolute;z-index:2;left:0px"></iframe>

You can adjust the position by yourself , Let the plug-in appear at the top of the page , The user decides how to play the music .

terms of settlement 3

This approach requires users Click the page to automatically play music .

<audio id="bgmusic" src="http://music.163.com/song/media/outer/url?id=1851244378.mp3" autoplay="autoplay" loop="loop" style="display: block; width: 3%; height:3%;"></audio>
    <script type="text/javascript"> function toggleSound() {
       var music = document.getElementById("bgmusic");// obtain ID console.log(music); console.log(music.paused); if (music.paused) {
       // Interpret whether to play  music.paused=false; music.play(); // Play without  } } setInterval("toggleSound()",1); </script>

terms of settlement 4

Use button control HTML5 Background music switch , Source code from https://www.helloweba.net/javascript/321.html
You can download it yourself .

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<title> demonstration ： Use button control HTML5 Background music switch </title>
<style> </style>
<link rel="stylesheet" type="text/css" href="../css/main.css" />

</head>

<body>

<div id="main">
   <div style="width:300px; height:120px; margin:100px auto">
		<audio id="music2" src="http://music.163.com/song/media/outer/url?id=1337065812.mp3" loop="loop"> Your browser does not support it audio label .</audio>
        <a href="javascript:playPause();"><img src="pause.gif" width="48" height="50" id="music_btn2" border="0" style="top: 10px;right: 10px;position: absolute;"></a>
   </div>
</div>
<script src="https://cdn.bootcss.com/jquery/1.8.2/jquery.min.js"></script>
<script> $("#audio_btn").click(function(){
       var music = document.getElementById("music"); if(music.paused){
       music.play(); $("#music_btn").attr("src","play.gif"); }else{
       music.pause(); $("#music_btn").attr("src","pause.gif"); } }); function playPause() {
       var music = document.getElementById('music2'); var music_btn = document.getElementById('music_btn2'); if (music.paused){
       music.play(); music_btn.src = 'play.gif'; } else{
       music.pause(); music_btn.src = 'pause.gif'; } } </script>

</body>
</html>