How to use html5 audio tag? HTML5 autoplay implementation code example-H5 Tutorial-php.cn

Home

Web Front-end

H5 Tutorial

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

寻∝梦

Aug 20, 2018 pm 02:14 PM

audio html5

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>

Copy after login

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="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>

Copy after login

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>

Copy after login

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 of this Website

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

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Assassin's Creed Shadows: Seashell Riddle Solution

4 weeks ago By DDD

What's New in Windows 11 KB5054979 & How to Fix Update Issues

3 weeks ago By DDD

Where to find the Crane Control Keycard in Atomfall

4 weeks ago By DDD

Roblox: Dead Rails - How To Complete Every Challenge

1 months ago By DDD

How to fix KB5055523 fails to install in Windows 11?

2 weeks ago By DDD

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Where is the login entrance for gmail email?

7741

Java Tutorial

1643

CakePHP Tutorial

1397

Laravel Tutorial

1291

PHP Tutorial

1233

Related knowledge

Table Border in HTML Sep 04, 2024 pm 04:49 PM

Guide to Table Border in HTML. Here we discuss multiple ways for defining table-border with examples of the Table Border in HTML.

Nested Table in HTML Sep 04, 2024 pm 04:49 PM

This is a guide to Nested Table in HTML. Here we discuss how to create a table within the table along with the respective examples.

HTML margin-left Sep 04, 2024 pm 04:48 PM

Guide to HTML margin-left. Here we discuss a brief overview on HTML margin-left and its Examples along with its Code Implementation.

HTML Table Layout Sep 04, 2024 pm 04:54 PM

Guide to HTML Table Layout. Here we discuss the Values of HTML Table Layout along with the examples and outputs n detail.

Klipsch unveils Flexus Core 300 flagship soundbar with 8K support, 12 speakers and room correction Sep 05, 2024 am 10:16 AM

The Klipsch Flexus Core 300 is the top model in the series and is positioned above the already available Flexus Core 200 in the company's soundbar line-up. According to Klipsch, this is the first soundbar in the world whose sound can be adapted to th

HTML Input Placeholder Sep 04, 2024 pm 04:54 PM

Guide to HTML Input Placeholder. Here we discuss the Examples of HTML Input Placeholder along with the codes and outputs.

HTML Ordered List Sep 04, 2024 pm 04:43 PM

Guide to the HTML Ordered List. Here we also discuss introduction of HTML Ordered list and types along with their example respectively

Moving Text in HTML Sep 04, 2024 pm 04:45 PM

Guide to Moving Text in HTML. Here we discuss an introduction, how marquee tag work with syntax and examples to implement.

See all articles