HTML5를 사용하여 배경 음악 스위치를 제어합니다

때때로 우리는 페이지에 배경 음악을 추가하여 사용자가 배경 음악, 특히 모바일 HTML5를 기반으로 한 멀티미디어 페이지를 켜고 끌 수 있습니다. HTML5의 오디오 태그는 오디오 재생 상태를 얻을 수 있으며 버튼을 터치하여 배경 음악을 끄고 켜질 수 있습니다.

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

HTML5 페이지를 만들고 <Audio> 태그를 배치하고 오디오 파일 소스를 설정하고 루프 재생을 설정하십시오. 두 개의 사진을 준비하여 배경 음악을 켜고 일시 중지하는 두 상태를 나타내면 클릭 할 수 있습니다.

XML/HTML 코드 복사 컨텐츠를 클립 보드에 복사합니다

1. <audioid = music2src = music.mp3loop = loop> 브라우저는 오디오 태그를 지원하지 않습니다. </오디오>
2. <ahref = javaScript : playPause ();> <imgsrc = pause.gifwidth = 48height = 50id = music_btn2border = 0> </a>

스위치 이미지 버튼을 클릭하면 javaScript 스크립트와 playPause () 함수를 호출했습니다. 이 기능에서 오디오 오디오 재생 상태를 판단하십시오. 중지 된 경우 (일시 정지). .play ()에게 전화하여 계속 연주하십시오. 재생 상태에 있다면 재생. pause ()가 즉시 중단됩니다. 두 상태를 전환 할 때 코드를 참조하십시오.

JavaScript 코드는 컨텐츠를 클립 보드에 복사합니다

1. functionplayPause () {
2. varmusic = document.getElementById ( 'music2');
3. varmusic_btn = document.getElementById ( 'music_btn2');
4. if (music.paused) {
5. music.play ();
6. music_btn.src = 'play.gif';
7. }
8. 또 다른{
9. music.pause ();
10. music_btn.src = 'pause.gif';
11. }
12. }

jQuery 코드를 사용하는 경우 다음과 같이 쓸 수 있습니다.

JavaScript 코드는 컨텐츠를 클립 보드에 복사합니다

1. <audioid = musicsrc = http : //cctv3.qiniudn.com/zuixingfuderen.mp3autoplay=autoplayloop=loop> 브라우저는 오디오 태그를 지원하지 않습니다. </오디오>
2. <AID = Audio_Btn> <imgsrc = play.gifwidth = 48height = 50id = music_btnborder = 0> </a>
3. <cript>
4. $ (#audio_btn) .click (function () {
5. varmusic = document.getElementById (음악);
6. if (music.paused) {
7. music.play ();
8. $ (#music_btn) .attr (src, play.gif);
9. }또 다른{
10. music.pause ();
11. $ (#music_btn) .attr (src, pause.gif);
12. }
13. });
14. </스크립트>