HTML5中为一个简单的MP3播放器做音频 fallback标签比你想象的要难

[原文发表地址] Fallback HTML5 audio tags for a simple MP3 podcast are harder than you’d think [原文发表时间] 2013-03-26 我最近花了好几个晚上和周末来重新设计博客和Hanselminutes播客站点。之前我没意识到这个播客站点有多糟糕。我想以后能扩宽受众群体,因为目前的受众面有些窄。现在我在给这个站点六年来360多人添加头像。 同时,非常感谢来自Portland Girl Geek Dinners的Lynsey Smith,因为她很努力的为我寻找图片! 我仍旧希望有更好的浏览器内置音频体验,所以假定我只是减少了音频标签并且完成了,对吧? 这个HTML5的音频标签不错吧?这样就行了,梦寐以求啊: <audio id="audioplayer" preload="metadata" type="audio/mp3" > <source src="http://s3.amazonaws.com/hanselminutes/hanselminutes_0363.mp3" type="audio/mp3"/> Your browser doesn’t support the HTML audio tag. Be sad. </audio> 如果你喜欢,可以到http://jsfiddle.net/CdxbX/来试一下。 没有比这更容易的了。 这是在IE9+中看到的: Chrome中: Firefox,version19: 呃,这个版本的Firefox现在还不支持MP3音频,所以它只是闪了一下就消失了。Firefox很快就会支持MP3音频,虽然是用底层的操作系统来播放流文件而不是自己的内置代码。 在windows7及以上版本的Firefox20(beta版)上,你可以通过在about:config中打开media.windows-media-foundation.enabled来测试MP3音频的支持情况。 让我失望的是HTML5有很多规范问题,你可以注意到尽管我有些fallback文本,但在Firefox中看不到。这是因为fallback元素只有在你的浏览器完全不支持音频标签的时候才会用到。 这根本不是我想要的。我想要的是“可以支持这些音频资源吗?不行?那就显示fallback中的内容”。对我来说这样比较直观。 我通过在Mozilla工作的Christian Heilmann联系到了Chris…

0

用ASP.NET MVC 4 和 jQuery Mobile制作一个可切换的桌面和移动站点

[原文发表地址]  Making a switchable Desktop and Mobile site with ASP.NET MVC 4 and jQuery Mobile [原文发表时间]   2012-10-01 3:17 PM 我真的很乐于工作并思考于移动网站。开发一款很好用户体验的手机便携式超级计算机应用要比桌面应用更有成就感。其实,我这篇博客, 在 2006 年的移动设备上看起来不错,那时没有什么人使用移动设备,除了医生和我们这些博客上的技术人员。 我曾经在博文中谈及过一个好的移动网站的重要性,如就在今天,请为您的网站创建良好的移动体验。然而,有些人曾问我是否要发表一篇博文,关于如何使用 ASP.NET MVC 做一个桌面和移动相结合的网站,类似于我今年早些时候我在俄罗斯举行的关于移动网站的会谈一文中使用的那些示例。(这里是那些现有的 ASP.NET 移动演示视频) 在你启动 Visual Studio 2012 后,点击文件 |新建ASP.NET MVC 4 应用程序,你就能看到互联网应用程序模板和移动模板。第一个模板可以创建标准的桌面网站,虽然有可互动的设计元素,因此它适用于小屏幕。利用另一个模板可创建 jQuery Mobile应用程序,主要是应用于手机和平板电脑的移动应用程序。让我们做一个在两者之间切换的应用。 我们将为桌面在ASP.NET MVC中做一个小站点,做一些快速的 DB 访问,添加 jQuery Mobile和View Switcher(视图切换器)来回切换。我将使用来自Electric Plum的Electric Mobile Studio来模拟 iPhone。您可以获得 7 天试用或您可以获得Electric Plum手机模拟器的 WebMatrix…

0

为何TypeScript是任何事情的答案?

[原文发表地址]  Why does TypeScript have to be the answer to anything? [原文发表时间]   2012-10-03 0:38 免责声明: 我不为TypeScript工作。我也不涉及该团队的工作,这只是我自己的意见和猜想。 宣布了TypeScript之后,人们都说” TypeScript显然是微软对谷歌Dart 的答案”或” TypeScript是 微软对CoffeeScript 的答案”。 今天我与Jez Humble聊到了对TypeScript的浓厚兴趣他引用了: 当聪明的人表现出对计算历史一无所知时,这令人感到失望。- Jez Humble TypeScript已经问世一天了。要看到它是否有用还为时过早,但看上去前途似乎一片光明。 TypeScript和Dart 人们将TypeScript与 Dart 进行了比较。这就像将苹果与化油器相比较一样。TypeScript建于 JavaScript之上,所以没有与JS 互操作问题。Dart 是从scratch编写的本机虚拟机。Dart 与javascript之间互相操作……,但它不是 JS。例如,它甚至不使用 JavaScript 数字类型。 TypeScript和 CoffeeScript 我是一个超级的 CoffeeScript 粉丝,虽然它是一种有着不同语法的语言。我喜欢TypeScript的部分是—到目前为止- TypeScript的静态类型可以启用更好的工具,警告波形线、 简单的语句完成,再加上智能重构功能。您还获得围绕代码的轻松导航,以及查找引用、 重命名、 和更多。目前你在CoffeeScript中得不到这些功能。 TypeScript是什么? TypeScript是 JavaScript 的超集,你编写它就像你编写我喜欢的 JavaScript一样。任何现有的 JavaScript 已经是TypeScript。有人争论说TypeScript是专门针对那些不想学…

0

微小的开心功能第2部分-Visual Studio 2012 中的ASP.NET Web API

[原文发表地址]  Tiny Happy Features #2 – ASP.NET Web API in Visual Studio 2012 [原文发表时间]  2012-08-10 23:55 很快就会有很多人开始编写有关 Visual Studio 2012的史诗般的博客文章。它们将包括大量的截图 (一些好的和一些差的),一些小的代码示例和极少的文本。我不能代表其他的团队 ;我只能讨论我们所做的工作。Azure 平台和工具(ASP.NET,IIS,WCF、 EF、Azure和更多)中的尖括号家伙们(我对网络平台和工具团队的称呼)已投入了大量的工作到我有时称之为"一千个微小伤亡"中。小小的眼中钉会如同大的缺失功能一样(或更加)令人沮丧。 我不想长篇大论(虽然我有时会这样做),我会展示一些团队致力于的微小的开心功能,正是这些微小的功能让生活变得更加美好。有些是大功能的,有些是小的,但它们都是微小的开心功能。 有的企业 Web 服务使用 SOAP 和 WS-*.*它们对许多事务性或复杂的方案来说很不错。然后还有更轻量级的RESTful web 服务或"Web API",它们使用 JSON,XML,展示了所有的好东西和HTTP 规范的稳定性。 WCF 过得好好的, ASP.NET 也如此,每种技术都有使用其的理由。正如这篇文章说得好, "SOAP的世界与HTTP 服务的世界是完全不同的。SOAP 允许我们将我们的服务所需的所有知识放在信息本身中",而"您可以使用 [Web API] 来创建只使用标准HTTP 概念 (URI 和动词)的HTTP服务,和创建使用更高级的 HTTP功能的服务 — — 请求/响应标头,超媒体概念等。 Kelly Sommers在澄清REST中撰写了我认为是REST的最好诠释,无论你想编写…

0

One ASP.NET-使用ASP.NET MVC 4 Beta和ASP.NET Web API 制作JSON Web API

[原文发表地址] One ASP.NET – Making JSON Web APIs with ASP.NET MVC 4 Beta and ASP.NET Web API [原文发表时间] 2012-02-25 12:07 AM ASP.NET MVC 4 测试版上周出来了。它有很多新的功能以及一些惊喜,这让我们更接近于”One ASP.NET”的想法。我在这周的MSDN Flash 电子新闻稿(你可以在这里订阅 MSDN Flash;)谈到过这一点。这里是我所说的一部分: 不要把ASP.NET想为一个孤立的小岛。它是大社区里的公民。随着越来越多的 ASP.NET 成为开源,而且我们每天努力推动其成为开放的。我们想要让ASP.NET更可插入、 更开放、 更有趣。我们已计划了一件大事情-一件会给你惊喜的事情。我希望你加入对话和社区。 这里是MVC 4 中改进的一些东西。 在测试版中的新功能 ASP.NET Web API 刷新过的和现代化的默认项目模板 新的移动项目模板 许多新的功能,以支持移动应用程序 自定义代码生成 加强对异步方法的支持 在版本说明中阅读完整的功能列表 你可能在过去听过我关于LEGO的谈论,展示了如何用NuGet将东西合适地放在一起。我提到过文本中的新功能和Web Forms中的One ASP.NET。这里是我在内部展示了几次的图表。我们会不断添加更多的详细信息来阐释如何将它们合适地放在一起以及你可以用http://asp.net/vnext中的它们来构建什么。 事实上,我专注于One ASP.NET,”WCF Web API”现在是…

0

在Real-time中使用并行和SignalR解决莎士比亚的“百万猴子”问题

[原文发表地址]  Solving the Shakespeare Million Monkeys Problem in Real-time with Parallelism and SignalR [原文发表时间]  2011-11-12  01:09 大约18个月前我跟Stephen Toub(在并行计算方面享有盛名)谈论过并行,以及它可以解决的问题。 我天真地问:“我们可以解决百万猴子的问题吗?” 他说:“这是什么问题?” “你知道,如果你有无限只猴子,还有无限个键盘,它们就能写出莎士比亚的作品。” 我们对一些想法做了下头脑风暴(因为Steven比我聪明些,所以整个头脑风暴中,他总是若有所思地凝视着空气,而我则坐在那儿什么都不干。)最后,我们决定用遗传算法。我们每秒会培育上千品种(假定的)猴子,然后根据他们写出莎士比亚作品的能力来选定哪几种可以被保留。 我们用.NET 4任务并行库让算法能更容易扩展到可用硬件。我是说,谁都能创造百万以上只猴子,但是那种超过12个处理器并行的循环就需要人才了,对吗?好吧,多少是有点技术含量的。.NET的并行功能已经为你准备好大部分内容了,这才是重点。它是为大量内容而设的并行进程。 我们创建了一个此应用程序的WinForm版本,我们用它来展示在.NET上的并行计算。然后Paul Batum和我上周参加了keeping It Realtime会议,会议上展示了SignalR。我不想再做相同的那种“这是real-time聊天应用程序”或者“这里是一张图表,展示了real-time的结果”这类演示,当然大家都习惯在这种场合做这类东西。我认为我们可以把WinForm莎士比亚猴子演示移植到ASP.NET和SignalR中,这也是Paul正准备着手的内容。 在做这类疯狂的密集运算时,还需要返回real-time结果,你可能会在real-time通知部分运用节点e,然后产生另一个进程,使用C或者其他数学功能,然后让它们互相交流。我们喜爱节点,你可以在IIS上运行节点,或者甚至在 WebMatrix中编写节点。不过,节点有所长,.NET也有所长。 比如,.NET很擅长CPU-bound的密集运算,好比在F#中做并行矩阵乘法。ASP.NET擅长扩展像Bing或者StackOverflow这种网站。说起real-time的时候,你可能不会想到IIS和ASP.NET,但是在使用长轮询以及在实验室中使用像拥有.NET4.5WebSocket支持的 WebSockets 高效协议时,SignalR使用异步处理器和智能技术能获取很棒的扩展。 所以,我们想看看你是否绑定异步背景工作,是否使用了尽可能多的处理器,是否通过SignalR的长轮询或者WebSocket获取real-time的状态更新,以及是否使用C#,.NET, ASP.NET和IIS。 它每秒在成千上万种猴子种类中选取8万种(每种大约200只猴子)来获取哈姆雷特的开场白。所以那就是1600万只猴子来获取文本,正如他们所说,有那么多猴子。 这就是应用程序的整体想法。客户端非常轻量级。只有两个框,两个按钮,一个复选框以及一些文本,包含了一些常用事件,比如运行,取消,完成和更新进程,不过你可以通过$.connection.monkeys看看猴子有什么不同,当然只要关掉$.connection,也可以通过$.connection.foo查看。 这些功能是客户端上的,但是我们通过持续连接在服务器上使用它们,然后更新文本。 1: <script src=”Scripts/jquery-1.6.4.min.js”></script> 2: <script src=”Scripts/json2.min.js”></script> 3: <script src=”Scripts/jquery.signalR.min.js”></script> 4: <script src=”signalr/hubs”></script> 5: <script> 6: $(function ()…

0

用SignalR创建实时永久长连接异步网络应用程序

原文发表地址: Asynchronous scalable web applications with real-time persistent long-running connections with SignalR 原文发表时间: 2011-08-29 09:29 我最近在研究异步和衡量的问题。你可能看过我之前写的博文:我研究的 node.js和iisnode在Windows上运行。 每个应用程序都有不同的要求,“衡量”的规则不是对每一种应用程序都适用的。衡量一个获取数据和循环的网络应用和那些召集深度潜在的主框架应用,保持服务器永久连接的应用是不一样的。 古语说“当你手上只有榔头的时候,看什么都像是钉子”,这个在编程和网络世界里的确是真理。工具越多并且掌握使用它们的技能那么效果就会越好。那也是为什么我不仅仅宣扬多种语言编程,还希望大家深入研究自己的主要语言。比如当你真正学会了LINQ,并且很擅长使用dynamic,C#就变成了一种更加有趣和富有表现力的语言。 更新是用榔头锤钉子的常见例子。想做一个聊天程序?每隔5秒更新一次。处理时间很长?那就丢掉动画图片,不停地更新,我亲爱的朋友! 间隔长一段时间来更新是另一种方法。简单来说就是打开一个连接然后保持打开状态,强制客户端(浏览器)等待,假装需要很长时间才能返回结果。如果你的服务器端程序模型上有足够多的控件,这就能允许你按照你期望的来返回数据在打开的连接上。如果连接断开了,连接会无缝地被重新打开,断开信息会在两个端口都隐藏掉。在WebSockets将会是另一种解决这类问题的方法。 ASP.NET中的永恒连接 在聊天应用程序或者股票应用程序中用ASP.NET做这样的永久连接不是很容易。在服务器或客户库中还没有一个合适的概念来讨论它。 SignalR是为ASP.NET而设的一个异步信号库。我们团队正在研究这个项目,希望能创建实时的多用户网络应用。 这不就是Socket.IO或者nowjs么? Socket.IO是一个客户端JavaScript库,能与node.js进行交流。Nowjs是能让你从服务器端调用客户的类库。这些和Signalr都很相似而且相关,只是同一个概念中的不同方面。这些JavaScript库都希望在服务器端有特定的东西和协定,这样就有可能让服务器端的显示如同客户希望看到的那样。 SignalR是一个完全基于客户及服务器端解决方案,它是以JS作为客户端和ASP.NET作为服务端来创建这类的应用。你可以去GitHub获取。 我能用12行代码创建一个聊天应用吗? 我想说 “在代码的世界中,简洁明了永远不是神话。” 换句话说,我希望我能这么说,当然可以! 1: Chat.DoItBaby() 但是那可能是一个谎言,下面是SignalR中的一个真实的聊天应用程序例子: 客户: 1: var chat = $.connection.chat; 2: chat.name = prompt(“What’s your name?”, “”); 3:  4: chat.receive = function(name, message){ 5: $(“#messages”).append(“”+name+”:…

1

JavaScript – Web汇编语言:第二部分 疯狂还是荒唐

[原文发表地址] JavaScript is Assembly Language for the Web: Part 2 – Madness or just Insanity? [原文发表时间] 2011-07-19 11:40 更新:你可以去看看这周Hanselminutes上我和Erik Meijer合作完成的播客,话题是:JavaScript – Web汇编语言:语义标记终结!清除机器码HTML。 一些朋友们认为说“JavaScript是一种Web汇编语言”完全是失去理智的说法。因此,我特地请教了一些JavaScript专家,比如Brendan Eich(JavaScript创始人)和Douglas Crockford(JSON创始人),还有Mike Shaver(Mozilla的技术副总裁)。以下是我们一些私人email对话,当然他们允许我在此公开了。 Mike Shaver:       我以前听说过两者间的比较,我觉得基本是对的。它忽略了大量投入在JS开发者工效上的成果,尽管汇编并没有被设计成人性化的语法(尤其是现代汇编)。 Brendan Eich:       我好些年前曾说过“JS是Web的x86”【可能是在JSConf上说的】,但我不敢确定它的出处。【Nick Thompson今年在Hacker News上也说过这话。】       这要点是说JS不仅是我们所能接触最底层的语言,而且它还有更高层的功能。       Shaver说得没错,没有宏处理器的汇编对程序员或者安全来说都不好。JS就是这样。所以这种类似情况需要一定的条件支持,否则就会显得相当愚蠢。       融合高层次的功能性编程和内存安全,并加以底层的功能像是类型数组,现有类型数组和二进制数据的ES.next扩展,这样就能组成一个比汇编更强大的编程语言,而且最大的改进就是内存安全。 Douglas Crockford:       我觉得把JavaScript看做Web的VM会更合适些。我们一直认为Java的JVM是Web的VM,但其实应该是JavaScript。       JavaScript解析器比JVM的bytecode校验器更能有效保证代码安全。JavaScript承诺只写入一次就能在任何地方运行,这点上它做得很好,也许是因为它在高层次运行,避免了一些底层事件。然后Turing去处理其它部分。       当然也有相当一部分人觉得JavaScript并非那么完美。我以前也是其中一份子,但是现在我不断地被其中的亮点所吸引。 Brendan Eich还说:       Doug提到了个很好的观点,那就是source打败bytecode。我的朋友,UC Irvine的Michael…

0