HTML5 오디오 태그를 사용하는 방법은 무엇입니까? HTML5 자동재생 구현 코드 예-H5 튜토리얼-php.cn

집

웹 프론트엔드

H5 튜토리얼

HTML5 오디오 태그를 사용하는 방법은 무엇입니까? HTML5 자동재생 구현 코드 예

寻∝梦

Aug 20, 2018 pm 02:14 PM

audio html5

html5 오디오 태그를 사용하는 방법은 무엇입니까? html5 오디오 태그의 자동 재생 및 사용에 대한 튜토리얼 html5 오디오 태그의 사용을 주로 소개하는 기사 소개와 html5 오디오 태그의 자동 재생 및 일시 중지에 대한 자세한 튜토리얼을 시작하겠습니다

html5 오디오 태그 사용 정의 :

html5 오디오 태그 example

간단한 html 5 오디오 :

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

로그인 후 복사

html5 오디오 태그 속성 :

HTML5 오디오 태그를 사용하는 방법은 무엇입니까? HTML5 자동재생 구현 코드 예

let은 html5 오디오 태그 사용에 대한 튜토리얼을 제공합니다. tag 자동 재생 및 일시 정지

이것은 모바일 측 WeChat의 H5 활동 페이지입니다. 요구 사항 중 하나는 페이지를 연 후 배경 음악이 자동으로 재생되기 시작하고 재생 및 일시 정지를 제어하는 것입니다. . 모바일에서는 음악 재생, 자동 재생 및 일시 정지를 위해 오디오 태그가 필요하므로 다음과 같이 작성하세요.

<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 브라우저에서 시뮬레이션하고 작은 스피커를 클릭하면 다음과 같이 할 수 있습니다. 오디오 태그를 동기식으로 제어하고 재생 및 일시 중지하고 자동으로 재생합니다.

HTML5 오디오 태그를 사용하는 방법은 무엇입니까? HTML5 자동재생 구현 코드 예 그래서 휴대폰으로 테스트해서 결과를 얻었습니다. . . . .

안드로이드폰에서는 다 정상인데

애플폰에서는 처음 페이지에 접속하면 자동으로 재생이 안되네요

많은 정보를 확인해본 결과, 이는 애플이 사용자를 막으려고 하기 때문이라는 것을 알게 되었습니다. 이로 인해 트래픽이 도난당할 수 있으므로 사용자가 적극적으로 트리거하지 않는 한 오디오 자동 재생이 금지됩니다. 물론, 수요를 충족시킬 수 있는 방법은 여전히 있습니다. 결국 다른 사람의 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 pre tag의 기능은 무엇인가요? html pre 태그의 사용법과 속성에 대한 자세한 설명

HTML li 태그는 어떤 용도로 사용되나요? HTML li 태그의 사용법과 속성 소개

위 내용은 HTML5 오디오 태그를 사용하는 방법은 무엇입니까? HTML5 자동재생 구현 코드 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.