用HTML5在Windows7默认IE9网站上创建播客播放器

用HTML5在Windows7默认IE9网站上创建播客播放器

  • Comments 0

[原文发表地址]Creating a Podcast Player with HTML5 for a IE9 Pinned Site on Windows 7

[原文发表时间]2011-08-22 23:53

我今天看了下HTML5Rocks 播客播放器示例,突然想到我好像从来没有写过关于我在4月份为这个开发者的生活所创建在IE9上的播客播放器。最近在TDL的每个页面上都有一个Flash播放器,而且总有一天有人会创建一个HTML5播客播放器来规范这些东西,但到目前为止,我还没看到。很多都只是单版或者示例,就好像我在这里小小的演示版一样。

HTML5Rocks播放器有很多聪明的设计,值得你查看下源代码来找出其中的妙处。在页面顶部有一个空的<audio/>标签,他们会问你“你能播放MP3吗?”,然后根据它的指示显示一个兼容性信息。你还可以在<audio/>元素中添加文本,如果不支持该元素,这些文本就会被显示出来。

   1: $('#compatibilityMsg').html('Your browser <strong>' + 
   2:    ($('#player').get(0).canPlayType('audio/mpeg') != '' ? 'can' : 'cannot') +
   3:    '</strong> play .mp3 files using HTML5 audio');

<audio>标签播放音频再简单不过了。HTML5Rocks示例还有些其他功能像是设置音量和搜索,这些是你不常在示例中看到的功能。

我想给TDL创建一个小的播客播放器,能够通过一些自定义按钮将Site Pinning和Jump List功能结合起来,并用HTML5音频来播放。

所以功能就是:

· 可钉针固定(将Favlcon拖到任务栏)

· 右击Jumplist查看最近播放

· 在预览中通过任务按钮播放

· 前一个,下一个,播放,暂停

· 最小化代码

另外,我不擅长JavaScript。下面就是它的样子看起来像是在不断变化(像动画GIF一样,应为这些都是未来的风格,难道你没听说?)对于那些谁不想自己尝试一下。

clip_image001

以下是代码的总体思路。

在首页上有所有篇章的列表,是通过for 循环来遍历show的数据库所创建的。我只是在每个show的div旁添加了一个无预先加载的音频元素:

   1: <audio id="audio-2-0-4-taste" preload="none" src="http://traffic.libsyn.com/devlife/204-Taste.mp3"></audio>
   2: <div class="episode"> 
   3:     <a href='post/2-0-3-education' class="showlink"> 
   4:         <img src="Images//203-lead.png"
   5:             alt="2.0.3 Education" width="320" height="220"/>
   6:         <div class='title'> 
   7:             <p>2.0.3 Education</p> 
   8:             <div class='description'> 
   9:                 <p>Scott and Rob talk to two developers about the role education has played in their careers</p> 
  10:             </div> 
  11:         </div> 
  12:     </a> 
  13: </div>

每个show都有一个“showlink”类的超文本引用。我把它们收集起来,放在了jQuery插件:

   1: <script>
   1:  
   2:  
   3:     $(function(){ 
   4:  
   5:         $(".showlink").IE9PodcastPlayer();  
   6:  
   7:     }); 
   8:  
</script>

希望大家也可以给些评论,因为我对jQuery和JavaScript还不是很熟练。其实还可以再添加一些选项/设置,不过我为这个页站设置了一些默认项。

简单来说,我添加了一些按钮,设置点击事件,来选择show的列表中的前后项。

   1: (function( $ ){
   2:   $.fn.IE9PodcastPlayer = function(options) {
   3:    
   4:   var settings = {
   5:       'playerStatusDiv' : '#podcastStatus',
   6:       'currentShowIndex' : 0
   7:     };
   8:  
   9:     this.each(function() {        
  10:       // If options exist, lets merge them
  11:       // with our default settings
  12:       if ( options ) { 
  13:         $.extend( settings, options );
  14:       }
  15:     });
  16:  
  17:     function initButtons() {
  18:         try {
  19:             // Developer sample code
  20:             if(window.external.msIsSiteMode()) {
  21:                 // Add buttons listener
  22:                 document.addEventListener('msthumbnailclick', onButtonClicked, false);
  23:      
  24:                 // Add buttons
  25:                 btnPrev = window.external.msSiteModeAddThumbBarButton('/images/prev.ico', 'Previous');
  26:                 btnPlayPause = window.external.msSiteModeAddThumbBarButton('/images/play.ico', 'Play');
  27:                 btnNext = window.external.msSiteModeAddThumbBarButton('/images/next.ico', 'Next');
  28:      
  29:                 // Add styles
  30:                 stylePlay = window.external.msSiteModeAddButtonStyle(btnPlayPause, '/images/play.ico', "Play");
  31:                 stylePause = window.external.msSiteModeAddButtonStyle(btnPlayPause, '/images/pause.ico', "Pause");
  32:                  
  33:                 // Show thumbar
  34:                 window.external.msSiteModeShowThumbBar();
  35:             }
  36:         }
  37:         catch(e) {
  38:             // fail silently
  39:         }
  40:     }
  41:      
  42:     function onButtonClicked(e) {
  43:         var btnText = "",
  44:             lastIndex = 0;
  45:          
  46:         if (e.buttonID !== btnPlayPause) {        
  47:  
  48:             switch (e.buttonID) {
  49:                 case btnPrev:
  50:                     btnText = "Previous";
  51:                     settings.currentShowIndex--;
  52:                     if (settings.currentShowIndex < 0) { settings.currentShowIndex = 0 };
  53:                     break;
  54:                 case btnNext:
  55:                     btnText = "Next";     
  56:                     lastIndex = $('audio').length-1;
  57:                     settings.currentShowIndex++;
  58:                     if(settings.currentShowIndex >= lastIndex) { settings.currentShowIndex = lastIndex };
  59:                     break;
  60:             }
  61:  
  62:             stopAll();        
  63:             $(settings.playerStatusDiv).text(btnText).fadeIn('slow',
  64:                 function(){playPause(settings.currentShowIndex)}
  65:             );        
  66:         } else {
  67:          
  68:             playPause(settings.currentShowIndex);            
  69:              
  70:         }
  71:     }
  72:  
  73:     function stopAll() {
  74:         $('audio').each(function(){
  75:             try {
  76:                     $(this)[0].pause();
  77:             }
  78:             catch(e) {
  79:                 // fail silently
  80:             };
  81:         });
  82:         $(settings.playerStatusDiv).hide();
  83:     }
  84:  
  85:     function playPause(podcastID) {
  86:         var player = $('audio')[podcastID];
  87:         if(player.paused)
  88:         {
  89:             player.play();
  90:             $(settings.playerStatusDiv).text("Playing...").fadeIn('slow');
  91:         }
  92:         else
  93:         {
  94:             player.pause();
  95:             $(settings.playerStatusDiv).text("Paused").fadeIn('slow');
  96:          }
  97:              
  98:         updatePlayPauseButton(podcastID);
  99:     }
 100:      
 101:     function updatePlayPauseButton(podcastID) {
 102:         var player = $('audio')[podcastID];
 103:         try {
 104:             if(window.external.msIsSiteMode()) {
 105:                 if (player.paused)
 106:                     window.external.msSiteModeShowButtonStyle(btnPlayPause, stylePlay);
 107:                 else
 108:                     window.external.msSiteModeShowButtonStyle(btnPlayPause, stylePause);
 109:             }
 110:         }
 111:         catch(e) {
 112:             // fail silently
 113:         }
 114:     }
 115:      
 116:     function addSite() {
 117:         try {
 118:             window.external.msAddSiteMode();
 119:         }
 120:         catch (e) {
 121:             alert("This feature is only available in Internet Explorer 9. Bummer.");
 122:         }
 123:     }
 124:          
 125:     initButtons();
 126:     updatePlayPauseButton(0);
 127:  
 128:     if(location.pathname == "/")
 129:     {
 130:         window.external.msSiteModeClearJumpList()
 131:         window.external.msSiteModeCreateJumplist('Episodes');    
 132:          
 133:         //This is the stuff we selected and passed in!
 134:         this.filter(":lt(10)").each(function() {
 135:             window.external.msSiteModeAddJumpListItem($(this).text().substring(41,60), this.href, '/favicon.ico');
 136:         });
 137:      
 138:         window.external.msSiteModeShowJumplist();
 139:     }
 140:  
 141:   };
 142: })( jQuery );

我必须解决而且还很纠结的一部分是最后的filter()和substring()。看到我是如何困难地处理截断的show标题的编码吗?我在传递整个<a/>和其子元素时弄了太多文本。我得找个更清晰的方式来让我的插件知道我的标题和音频文件。期待你们的评论。

如果你真想了解支持钉针固定和动态jumplist 功能的jQuery插件还有我还没写到的内容,请看Pinify the jQuery Site Pinning Plugin或者NuGet

Leave a Comment
  • Please add 6 and 5 and type the answer here:
  • Post