Home >Web Front-end >H5 Tutorial >How to use html5 audio tag? HTML5 autoplay implementation code example

How to use html5 audio tag? HTML5 autoplay implementation code example

寻∝梦Original: 2018-08-20 14:14:4517176browse

html5 How to use the audio tag? Tutorial on automatic playback and use of html5 audio tags. Let’s start our article introduction, which mainly introduces the use of html5 audio tags, as well as detailed tutorials on automatic playback and pause of html5 audio tags

html5 audio tags Usage definition:

html5 audio tag example

A simple HTML 5 audio:

<audio src="someaudio.wav">
您的浏览器不支持 audio 标签。
</audio>

Attributes of the html5 audio tag:

How to use html5 audio tag? HTML5 autoplay implementation code example

Let’s give an example tutorial on the use of html5 audio tags

html5 audio tags automatically play and pause

This is a mobile WeChat H5 activity page. One of the requirements is that the background music will automatically start playing after opening the page. Click the music icon button to control its playback and pause.

On the mobile side, for music playback, automatic playback and pause, the audio tag is necessary, so just start writing:

<code class="language-html"><i class="icon-music-outer">  
    <i class="forbid icon-music"></i>  
     <audio loop autoplay="autoplay" controls id="bgMusic" src="./music/musicMin.mp3">  
     </audio>  
</i>  
<script>  
    var $music = $(&#39;.icon-music-outer&#39;);  
    var $forbid = $music.find(&#39;.forbid&#39;);  
    var audio = document.getElementById(&#39;bgMusic&#39;);  
      $music.on(&#39;click&#39;, function () {  
        if ($forbid.hasClass(&#39;icon-music&#39;)) {  
            $forbid.removeClass(&#39;icon-music&#39;).addClass(&#39;icon-forbidMusic&#39;);  
        } else {  
            $forbid.removeClass(&#39;icon-forbidMusic&#39;).addClass(&#39;icon-music&#39;);  
        }  
  
        if (audio.paused) {  
            audio.play();  
            return  
        }  
        audio.pause();  
    });  
</script>  
</code>

How to use html5 audio tag? HTML5 autoplay implementation code example

## Simulate on Chrome browser, click on the small speaker, you can synchronously control the audio tag to play and pause, and it can also play automatically.

So I put it on my mobile phone and tested it, and the results came out. . . . .

Everything is normal on the Android phone;

But on the Apple phone, it cannot play automatically when you first enter the page

After checking a lot of information, I found out that this This is because Apple prohibits the automatic playback of audio unless the user actively triggers it in order to prevent the user from being in a traffic environment, which will lead to the theft of traffic. Of course, there are still ways to meet the demand. After all, it is run under someone else's WeChat browser. People have to lower their heads when they are under the eaves!

Another js file introduced by WeChat developers. The overall writing method is as follows: jq and native writing method

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./css/icon.css" type="text/css">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
    <style>
        .icon-music-outer{
            display: inline-block;
            width: 25px;
            height: 25px;
            position: fixed;
            right: 5px;
            top: 10px;
            font-size: 25px;
            color: #ffda51;
            z-index: 100;
        }
        .forbid{
            display: inline-block;
            font-size: 25px;
            width: 25px;
            height: 25px;
        }
        .icon-forbidMusic{
            display: inline-block;
            font-size: 25px;
            width: 25px;
            height: 25px;
            color: #d0f2fc;
            z-index: 101;
        }
        audio{
            position: absolute;
            left: -300px;
        }
    </style>
</head>
<body>
<i class="icon-music-outer">
    <i class="forbid icon-music"></i> <!--控制音乐图标-->
    <audio loop autoplay="autoplay" controls id="bgMusic" src="./music/musicMin.mp3">
    </audio>
</i>
<script src="./js/jquery-3.1.0.min.js" type="text/javascript"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script>
    var $music = $(&#39;.icon-music-outer&#39;);
    var $forbid = $music.find(&#39;.forbid&#39;);
    var audio = document.getElementById(&#39;bgMusic&#39;);
    function audioAutoPlay(audio) {
        document.addEventListener("WeixinJSBridgeReady", function () {
            audio.play();
        }, false);
        document.addEventListener(&#39;YixinJSBridgeReady&#39;, function () {
            audio.play();
        }, false);
    }
     audioAutoPlay(audio);
     $music.on(&#39;click&#39;, function () {
        if ($forbid.hasClass(&#39;icon-music&#39;)) {
            $forbid.removeClass(&#39;icon-music&#39;).addClass(&#39;icon-forbidMusic&#39;);
        } else {
            $forbid.removeClass(&#39;icon-forbidMusic&#39;).addClass(&#39;icon-music&#39;);
        }
         if (audio.paused) {
            audio.play();
            return
        }
        audio.pause();
    });
</script>
</body>
</html>

The difference between HTML 4.01 and HTML 5# The ##

Tips and Notes

Tip: You can place text content between the start tag and the end tag, so that older browsers can display a message that the tag is not supported.

[Related recommendations]

html What is the role of the pre tag? Detailed explanation of the usage of html pre tag and its attributes

What is the HTML li tag used for? Introduction to HTML li tag usage and attributes

The above is the detailed content of How to use html5 audio tag? HTML5 autoplay implementation code example. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How does html5 mobile page adapt to the screen? Four ways to adapt html5 pages to mobile phone screensNext article：How does html5 mobile page adapt to the screen? Four ways to adapt html5 pages to mobile phone screens

See more

How to use html5 audio tag? HTML5 autoplay implementation code example

Related articles