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:
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 = $('.icon-music-outer'); var $forbid = $music.find('.forbid'); var audio = document.getElementById('bgMusic'); $music.on('click', function () { if ($forbid.hasClass('icon-music')) { $forbid.removeClass('icon-music').addClass('icon-forbidMusic'); } else { $forbid.removeClass('icon-forbidMusic').addClass('icon-music'); } if (audio.paused) { audio.play(); return } audio.pause(); }); </script> </code>
<!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 = $('.icon-music-outer'); var $forbid = $music.find('.forbid'); var audio = document.getElementById('bgMusic'); function audioAutoPlay(audio) { document.addEventListener("WeixinJSBridgeReady", function () { audio.play(); }, false); document.addEventListener('YixinJSBridgeReady', function () { audio.play(); }, false); } audioAutoPlay(audio); $music.on('click', function () { if ($forbid.hasClass('icon-music')) { $forbid.removeClass('icon-music').addClass('icon-forbidMusic'); } else { $forbid.removeClass('icon-forbidMusic').addClass('icon-music'); } 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 attributesWhat is the HTML li tag used for? Introduction to HTML li tag usage and attributesThe 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!