어지간하면 동작되는 html을 올려서 미리보기가 될 수 있게 해 줬으면 좋겠지만, audio 태그에 쓰이는 원본 파일이 잘못하면 저작권 문제 걸릴 수 있으므로.. ㅠㅠ


소스코드만 올립니다.


각자 알아서 적당한 mp3 파일 구한 다음에 audio.mp3로 저장해서 테스트 해 보시면 어떤 역할을 하는 코드인지 금방 알 수 있습니다.


<!DOCTYPE html>

<html>

  <head>

    <title>Audio play/pause Example</title>  

</head>

<body>

<div>

  <audio id="audio1" autoplay loop src="audio.mp3">Canvas not supported</audio>

</div>


 <button id="playbutton" onclick="togglePlay();">pause</button>  


 <script type="text/javascript">

   // Create a couple of global variables to use. 

   var audioElm = document.getElementById("audio1"); // Audio element


   // Hook the ratechange event and display the current playbackRate after each change


   //  Alternates between play and pause based on the value of the paused property

   function togglePlay() {

     if (document.getElementById("audio1")) {


       if (audioElm.paused == true) {

         playAudio(audioElm);    //  if player is paused, then play the file

       } else {

         pauseAudio(audioElm);   //  if player is playing, then pause

       }

     }

   }


   function playAudio(audioElm) {

     document.getElementById("playbutton").innerHTML = "pause"; // Set button text == Pause

     // Get file from text box and assign it to the source of the audio element 

     audioElm.play();

   }


   function pauseAudio(audioElm) {

     document.getElementById("playbutton").innerHTML = "play"; // Set button text == Play

     audioElm.pause();

   }


 </script>


</body>

</html>


이 코드는 마이크로소프트의 가이드에 나온 코드에서 제가 쓰지 않을 기능을 빼고 단순화시킨 것입니다.

이런 기능을 회사에서 요구해서 만든 건데, 동작은 아주 간단합니다.

버튼을 누르면 음악이 멈췄다가 나왔다가 합니다.

실제로 회사에서 이 코드를 쓸 때에는 텍스트가 아닌 이미지를 사용할 가능성이 높아서, 변경될 여지가 있습니다.

물론 디자인도 변경되어야 할 거구요.





저작자 표시 비영리 변경 금지
신고

댓글을 달아 주세요

티스토리 툴바