버튼을 사용하여 배경 음악 전환을 제어하는 ​​HTML5 방법

이 글은 주로 HTML5에서 배경음악 전환을 제어하기 위해 버튼을 사용하는 방법을 소개합니다. 이제 특정 참조 값이 있어 공유합니다. 도움이 필요한 친구들이 참고할 수 있습니다

때때로 페이지에 배경 음악을 추가합니다. 특히 휴대폰 HTML5 기반 멀티미디어 페이지의 경우 사용자가 직접 배경 음악을 켜고 끌 수 있도록 허용합니다. HTML5의 오디오 오디오 태그는 오디오의 재생 상태를 얻을 수 있으며, 배경 음악은 터치하여 켜고 끌 수 있습니다. 버튼.

렌더링은 다음과 같습니다.

데모 효과 보기  소스 코드 다운로드

HTML

HTML5 페이지를 만들고

<audio id="music2" src="music.mp3"  loop="loop">你的浏览器不支持audio标签。</audio>    
<a href="javascript:playPause();"><img  src="/static/imghwm/default1.png"  data-src="pause.gif"  class="lazy"      style="max-width:90%"  style="max-width:90%" id="music_btn2" border="0" alt="버튼을 사용하여 배경 음악 전환을 제어하는 ​​HTML5 방법" ></a>

Javascript

이미지 전환 버튼을 클릭했을 때 자바스크립트 스크립트인 playPause() 함수를 호출했습니다. 이 함수는 오디오 재생 상태를 결정합니다. 중지(일시 중지)된 경우 .play()를 호출하여 재생 상태인 경우 즉시 재생을 일시 중지합니다.pause() 두 상태가 전환되면 버튼 이미지가 표시됩니다. 시간이 지나면 코드가 업데이트됩니다.
JavaScript

function playPause() {    
    var music = document.getElementById('music2');    
    var music_btn = document.getElementById('music_btn2');    
    if (music.paused){    
        music.play();    
        music_btn.src = 'play.gif';    
    }    
    else{    
        music.pause();    
        music_btn.src = 'pause.gif';     
    }    
}   如果使用jQuery代码可以这样写：

JavaScript

<audio id="music" src="http://cctv3.qiniudn.com/zuixingfuderen.mp3" autoplay="autoplay" loop="loop">你的浏览器不支持audio标签。</audio>    
<a id="audio_btn"><img  src="/static/imghwm/default1.png"  data-src="play.gif"  class="lazy"      style="max-width:90%"  style="max-width:90%" id="music_btn" border="0" alt="버튼을 사용하여 배경 음악 전환을 제어하는 ​​HTML5 방법" ></a>    
<script>    
$("#audio_btn").click(function(){    
    var music = document.getElementById("music");    
    if(music.paused){    
        music.play();    
        $("#music_btn").attr("src","play.gif");    
    }else{    
        music.pause();    
        $("#music_btn").attr("src","pause.gif");    
    }    
});    
</script>

위 내용은 모두의 학습에 도움이 되기를 바랍니다. PHP 중국어 웹사이트로!

관련 권장사항:

메시지 및 답장 구현을 위한 HTML5 페이지

위 내용은 버튼을 사용하여 배경 음악 전환을 제어하는 ​​HTML5 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!