H5 페이지에 음악 재생을 추가하는 방법

웹페이지를 만들다 보면 음악이 재생되는 장면을 자주 접하게 되는데, 작품 오른쪽 상단에 오디오 버튼이 있어서 음악이 재생됩니다.클릭하면 재생과 일시정지가 전환됩니다. h5 웹 페이지에 음악 재생을 추가하는 방법에 대해 이야기하겠습니다.

실제로는 매우 간단하며 몇 가지 간단한 단계만 완료하면 완료됩니다.

1. HTML 코드를 추가합니다. 각 페이지의 오른쪽 상단(또는 다른 위치)에 바인딩되어 있으므로 고정으로 위치 지정에 사용됩니다. 페이지 하단의 /body 앞에 HTML 코드를 추가합니다.

<span id="musicControl">
        <a id="mc_play" class="on" οnclick="play_music();">
            <audio id="musicfx" loop="loop" autoplay="autoplay">
                <source src="mp3/Dreams.mp3" type="audio/mpeg">
            </audio>
        </a>
 </span>

여기의 소스 태그에 해당하는 오디오 링크는 사용자 고유의 오디오 연결로 대체됩니다.

2. 다음으로 CSS 스타일을 설정합니다.

/* music */
@-webkit-keyframes reverseRotataZ{
    0%{-webkit-transform: rotateZ(0deg);}
    100%{-webkit-transform: rotateZ(-360deg);}
}
@-webkit-keyframes rotataZ{
    0%{-webkit-transform: rotateZ(0deg);}
    100%{-webkit-transform: rotateZ(360deg);}
}
#musicControl { position:fixed;right:10px;top:20px;margin-top:0;display:inline-block;z-index:99999999}
#musicControl a { display:inline-block;width:25px;height:25px;overflow:hidden;background:url('../img/play.png') no-repeat;background-size:100%;}
#musicControl a audio{width:100%;height:56px;}
#musicControl a.stop { background-position:left bottom;}
#musicControl a.on { background-position:0px 1px;-webkit-animation: reverseRotataZ 1.2s linear infinite;}
#music_play_filter{width:100%;height:100%;overflow:hidden;position:fixed;top:0;left:0;z-index:99999998;}

여기에 아이콘 반전을 위한 H5 애니메이션 규칙이 추가됩니다. 아이콘은 다음과 같습니다.

3. 다음으로 <script> 코드를 추가하세요.

<!-- music -->
<script>
    function play_music(){
        if ($('#mc_play').hasClass('on')){
            $('#mc_play audio').get(0).pause();
            $('#mc_play').attr('class','stop');
        }else{
            $('#mc_play audio').get(0).play();
            $('#mc_play').attr('class','on');
        }
        $('#music_play_filter').hide();
        event.stopPropagation(); //阻止冒泡
    }
    function just_play(id){
        $('#mc_play audio').get(0).play();
        $('#mc_play').attr('class','on');
        if (typeof(id)!='undefined'){
            $('#music_play_filter').hide();
        }
        event.stopPropagation(); //阻止冒泡
    }
    function is_weixn(){
        return false;
        var ua = navigator.userAgent.toLowerCase();
        if(ua.match(/MicroMessenger/i)=="micromessenger") {
            return true;
        } else {
            return false;
        }
    }
    var play_filter=document.getElementById('music_play_filter');
    play_filter.addEventListener('click', function(){
        just_play(1);
    });
    play_filter.addEventListener('touchstart', function(){
        just_play(1);
    });
    play_filter.addEventListener('touchend', function(){
        just_play(1);
    });
    play_filter.addEventListener('touchmove', function(){
        just_play(1);
    });
    play_filter.addEventListener('mousedown', function(){
        just_play(1);
    });
    play_filter.addEventListener('mouseup', function(){
        just_play(1);
    });
    play_filter.addEventListener('mousemove',function(){
        just_play(1);
    });
    window.οnlοad=function(){
        if (!is_weixn()){
            just_play();
        }
    }

참고: WeChat에서 열렸는지 확인하는 방법도 여기에 추가되었습니다. WeChat에서 열리지 않으면 자동으로 재생됩니다. WeChat에서 재생 상태로 변경하려면 버튼을 클릭해야 합니다. 이 기능은 필요하지 않습니다. 다음 코드를 주석 처리하면 됩니다.

/*window.οnlοad=function(){
        if (!is_weixn()){
            just_play();
        }
    }*/

위의 코드로 뮤직플레이어를 구현할 수 있는데, 정말 간단하지 않나요?

H5 페이지에 음악 재생을 추가하는 방법

추천