音频标签的自定义

我想在HTML5中自定义音频标签。玩弄控件很容易，但有没有办法显示和自定义轨道和音量控制器的进度条？音频标签的自定义

2012-01-14 lunar

下面是一个使用CSS风格化elems的JavaScript的控制音频播放器的一个例子：

<!doctype html> 
<html lang="en"> 
    <head> 
     <style> 
      html, body {padding:50px;} 
      * {margin:0px;padding:0px;} 
      #audioWrapper {position:relative;display:inline-block;} 
      .audioPlayer {position:absolute;left:0px;bottom:0px; 
       display: block;height:48px;width:400px;} 
      #playPauseButton {position: absolute;top: 13px;left: 10px; 
       display:inline;width: 18px;height: 22px; 
       background: url(/images/player.png) no-repeat -20px -2px; 
       cursor: pointer;} 
      #playPauseButton.playing {background-position:0px -2px;} 
      #playPauseButton:active {top:10px;} 
      #timeRemaining {position:absolute;top:17px;right:5px;font-size:11px; 
       font-weight:bold;color:#fff;} 
      #timeLine {position: absolute;top: 19px;left: 50px;right: 50px; 
       height: 6px;padding: 2px;border-radius: 5px;background: #546374;} 
      #slideHandle {position: absolute;top: -6px;left: 0;width: 20px; 
       height: 20px;margin-left: -10px; 
       background: url(/images/player.png) no-repeat -39px -3px; 
       cursor: pointer;} 
      .audioPlayerBackground {height:400px;width:400px;} 
     </style> 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
     <script type="text/javascript" src="/js/jquery-ui-1.8.17.custom.min.js"></script> 
     <script type="text/javascript"> 
      function setupAudio(){ 
       var userSetSliderPosition = false; 
       var audioSliderCreated = false; 

       if(!!document.createElement('audio').canPlayType) { 
        var audioElemStr = '<audio><source src="/sound/Mozart_-_Bassoon_Concerto_in_Bb_major_-_Allegro.ogg" type="audio/ogg"></source></audio>'; 
        $(audioElemStr).insertAfter(".audioPlayer #timeRemaining"); 

        audioPlayer = $('.audioPlayer audio').get(0); 
        slideHandle = $('.audioPlayer #slideHandle'); 
        timeRemainingElem = $('.audioPlayer #timeRemaining'); 

        $("#playPauseButton").click(function() {  
         if (audioPlayer.paused) { audioPlayer.play(); } 
         else { audioPlayer.pause(); }  
        }); 

        $(audioPlayer).bind('play',function() { 
         $("#playPauseButton").addClass('playing'); 
         }).bind('pause ended', function() { 
         $("#playPauseButton").removeClass('playing'); 
        }); 

        $(audioPlayer).bind('timeupdate', function() { 
         var audioPlayerDuration = audioPlayer.duration; 

         if (!userSetSliderPosition){ 
          var audioPlayerCurrentTime = audioPlayer.currentTime; 
          var audioPlayerRemainingTime = parseInt(audioPlayerDuration - audioPlayerCurrentTime); 
          var slideHandlePercentComplete = (audioPlayerCurrentTime/audioPlayerDuration) * 100; 
          var minutes = parseInt(audioPlayerRemainingTime/60); 
          var seconds = parseInt(audioPlayerRemainingTime%60); 

          slideHandle.css({left: slideHandlePercentComplete + '%'}); 
          timeRemainingElem.text(minutes + ':' + (seconds < 10 ? ('0' + seconds) : seconds)); 
         } 

         if (!audioSliderCreated) { 
          audioSliderCreated = true; 
          $('.audioPlayer #timeLine').slider({ 
           max: audioPlayerDuration, 
           step: 0.01, 
           animate: "slow",   
           slide: function() {    
            userSetSliderPosition = true; 
           }, 
           stop:function(e,ui) { 
            userSetSliderPosition = false;   
            audioPlayer.currentTime = ui.value; 
           } 
          }); 
         } 
        }); 
       } 
      } 
     </script> 
    </head> 
    <body onload="setupAudio();"> 
     <div id="audioWrapper"> 
      <img class="audioPlayerBackground" alt="" src="/images/spaceJunk.png" /> 
      <div class="audioPlayer"> 
       <div id="playPauseButton"></div> 
       <div id="timeLine"> 
        <div id="slideHandle" class ="ui-slider-handle"></div> 
       </div> 
       <div id="timeRemaining"></div> 
       <!--audio and source tags will be inserted here, if the browser supports them--> 
      </div> 
     </div> 
    </body> 
</html>

你可以看到它的一个例子在这里运行：http://www.vdstudios.net/tutorials/html/stylableAudioPlayer.html

来源

2012-01-15 08:47:31 vdbuilder

我建议在后台播放音频，用JavaScript通过自己定制的界面控制它。

来源

2012-01-14 23:42:49 Brad

这是我在做什么。我唯一不知道的是，如果我能以某种方式显示音轨和音量控制的进度条。 – lunar 2012-01-15 00:27:33

音频标签的自定义

回答

相关问题