HTML5オーディオタグの使い方は？ HTML5 自動再生の実装コード例-H5 チュートリアル-php.cn

ホームページ

ウェブフロントエンド

H5 チュートリアル

HTML5オーディオタグの使い方は？ HTML5 自動再生の実装コード例

寻∝梦

Aug 20, 2018 pm 02:14 PM

audio html5

HTML5オーディオタグの使用方法? html5 audio タグの自動再生と使用に関するチュートリアルそれでは、html5 audio タグの使用方法を中心に、html5 audio タグの自動再生と一時停止に関する詳細なチュートリアルを紹介する記事の紹介を始めましょう

html5 audio タグの使用方法の定義。 :

html5 オーディオタグの例

簡単な HTML 5 オーディオ:

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

ログイン後にコピー

HTML5 オーディオタグの属性:

HTML5オーディオタグの使い方は？ HTML5 自動再生の実装コード例

HTML5 オーディオタグの使用に関するチュートリアルの例を示しましょう

html 5 オーディオタグ自動再生と一時停止

これは、モバイル側の WeChat の H5 アクティビティページです。要件の 1 つは、ページを開いた後、BGM の再生と一時停止を制御するために、BGM が自動的に開始されることです。。

モバイル側では、音楽の再生、自動再生、一時停止には audio タグが必要なので、次のように記述するだけです:

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

ログイン後にコピー

HTML5オーディオタグの使い方は？ HTML5 自動再生の実装コード例

Chrome ブラウザでシミュレートし、小さなスピーカーをクリックすると、オーディオタグを同期的に制御し、再生と一時停止を行い、また自動的に再生します。

そこで、携帯電話でテストして結果を得ました。。。。。

Android スマートフォンではすべて正常です。

しかし、Apple スマートフォンでは、最初にページに入ったときに自動的に再生できません

多くの情報を確認した結果、これは Apple がユーザーの利用を妨げようとしていることが原因であることがわかりましたこれによりトラフィックが盗まれる可能性があるため、ユーザーが積極的にトリガーしない限り、オーディオの自動再生は禁止されます。もちろん、需要に応える方法はまだあります。結局のところ、他人の WeChat ブラウザで実行されているのですから、人々は軒下にいるときは頭を下げる必要があります。

WeChat に導入された別の開発者用 JS ファイル、全体的な記述は次のとおりです: jq とネイティブ記述

<!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>

ログイン後にコピー

HTML 4.01 と HTML 5 の違い

ヒントとメモ

ヒント: 開始タグと終了タグの間にテキストコンテンツを配置すると、古いブラウザでタグがサポートされていないというメッセージが表示されることがあります。

HTMLのliタグは何に使うの？ HTML liタグの使い方と属性の紹介

以上がHTML5オーディオタグの使い方は？ HTML5 自動再生の実装コード例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。