资讯频道 → Web前端
阅读更多

3顶
0踩

Web前端

原创新闻 JS-909：一个不使用Flash的有趣打鼓机器

2008-11-19 12:33 by 副主编 QQbyte 评论(0) 有5170人浏览
Flash

声明：ITeye资讯文章的版权属于ITeye网站所有，严禁任何网站转载本文，否则必将追究法律责任！

Cameron Adams 创建了一个有趣的JavaScript实践：JS-909，这是一个打鼓机器，能够演奏声音而不使用Flash，也不使用任何库，声音由<embed>标签引入。代码如下： 

for (var sound in sounds)
{
var embedContainer = document.createElement("div");
embedContainer.className = "embedContainer";
document.body.appendChild(embedContainer);
embedContainer.innerHTML = soundElementString(sound, sounds[sound]);
}


同时这里也有通过data:URLs来提供页面声音技术的解决方案。你可以创建web音频应用，无需使用Flash，或者离线打开一个音频文件演奏。JS无所不能。

点击下图去玩玩JS-909吧，记得点击圆点选择鼓声类型：

来自: ajaxian.com
3
顶
0
踩
评论 共 0 条 请登录后发表评论

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • OpenGL教程Nehe版-中文版

    OpenGL教程Nehe版-中文版

  • OpenGL透明

    1 #include "gl/glut.h" 2 3 void Initialization() 4 { 5 glClearColor(0.0f,0.0f,0.0f,1.0f); 6 7 GLfloat lightSpecular[]={1.0,1.0,1.0,1.0}; 8 GLfloat lightPosition[]={...

  • 新手上路:Jeff Molofee(NeHe) 的 OPENGL 教程-第一课

    Jeff Molofee(NeHe) 的 OPENGL 教程#1font { font-family: Arial; line-height: 140%; font-size: 12pt; margin-top: 1; margin-bottom: 1 }body { font-famil

  • OpenGL教程之看起来很棒的雾

    Jeff Molofee(NeHe)的OpenGL教程- 看起来很棒的雾原 文：Lesson 16: Cool Looking Fog译 者：sakura　　难道你不想把“雾”加入到你的OpenGL程序中吗？那么在这课里我将要为您展现如何实现这项功能。这是我第一次写教程，而且相对来说我也是OpenGL/C++程序设计新手，所以如果您发现有什么错误的话，请让我知道。这课的代码是基于第7课的。　　

  • 转起来：Jeff Molofee(NeHe) 的 OPENGL 教程－第四课

    font { font-family: Arial; line-height: 180%; font-size: 12pt; margin-top: 2; margin-bottom: 2 }body { font-family: font }td { border-left-co

  • Nehe OpenGL Tutorial 中文版（附源码）.rar

    Nehe OpenGL Tutorial 中文版（附源码）.rar

  • Qt OpenGL教程

    Qt OpenGL教程 最近一段时间除了学习Qt，翻译Qt文档之外，由于工作和兴趣的原因，开始着手看Qt OpenGL编程。在网上搜索了有关OpenGL的教程，发现NeHe的OpenGL教程的还很不错，作者是NeHe。上面有很多种语言的实现，但是没有Qt和Gtk的，所以我就想着手写这个Qt OpenGL教程，每课的内容和NeHe是一样的。另外，介绍NeHe的一个中文翻译站点CSDN-CKer翻译...

  • OpenGL-Nehe完整中文教程和全部源代码

    nehe的确是个大牛，写出来这样的教程，现在网上基本上很多代码都是对nehe代码的改编，本文档包含pdf教程和全部的源代码，代码可以直接运行。

  • NeHe-OpenGL-Qt5-Lesson03-注释与学习-SmoothColors

    给物体加上色彩。 效果如下： 相比第二节的黑白效果，增加了color属性。 在vertshader.glsl上可以看到算法 #ifdef GL_ES precision mediump int; precision mediump float; #endif attribute vec4 colAttr; attribute vec4 posAttr; varying vec4 col; uniform mat4 mvpMatrix; void main() { col = co

  • NeHe OpenGL第四十三课：FreeType库

    NeHe OpenGL第四十三课：FreeType库 在OpenGL中使用FreeType库 使用FreeType库可以创建非常好看的反走样的字体，记住暴雪公司就是使用这个库的，就是那个做魔兽世界的。尝试一下吧，我只告诉你了基本的使用方式，你可以走的更远。   在OpenGL中使用FreeType库 这里是一个快速的介绍，它告诉你如何在OpenGL中使用FreeType渲染Tru...

  • NeHe的opengl教程delphi版(8)----简单的透明

    {呵呵，这两课早就翻译好了，一直没贴，大家久等了（有人再等吗？）简单的透明OpenGL中的绝大多数特效都与某些类型的(色彩)混合有关。混色的定义为，将某个象素的颜色和已绘制在屏幕上与其对应的象素颜色相互结合。至于如何结合这两个颜色则依赖于颜色的alpha通道的分量值，以及/或者所使用的混色函数。Alpha通常是位于颜色值末尾的第4个颜色组成分量。前面这些课我们都是用GL_RGB来指定颜色的

  • OpenGL点阵字体绘制终极解决方案

    OpenGL点阵字体绘制终极解决方案! 事情总在变化, opengl迎来了3.3以及4.1的进化, 相信今后的扩充也会朝着这个方向. 对于字体渲染方面, 也并不是什么坏事. 今后有时间再写篇关于3.3和4.1的全屏字体渲染的新方案, 仍然是结合freetype2的, 相信随着freetype2的进步, 和对它的逐步认识, 应该会比现有方案更简单高效... 现在最最最重要的事是...睡觉！

  • OpenGL教程之向3D进军

    Jeff Molofee(NeHe)的OpenGL教程- 向3D进军　　原 文：Lesson 5: Solid Objects　　译 者：CKER　　在上节课的内容上作些扩展，我们现在开始生成真正的3D对象，而不是象前两节课中那样3D世界中的2D对象。我们给三角形增加一个左侧面，一个右侧面，一个后侧面来生成一个金字塔（四棱锥）。给正方形增加左、右、上、下及背面生成一个立方体。　　我们混合金字塔

  • NeHe OpenGL教程 第八课：混合

    转自【翻译】NeHe OpenGL 教程 前言 声明，此 NeHe OpenGL教程系列文章由51博客yarin翻译（2010-08-19），本博客为转载并稍加整理与修改。对NeHe的OpenGL管线教程的编写，以及yarn的翻译整理表示感谢。       混合: 在这一课里，我们在纹理的基础上加上了混合，它看起具有透明的效果，当然解释它不是那么容易，当希望你喜欢它。 简单的透...

  • opengl es 3.0编程指南(原书第2版)_《图形编程技术学习》（九）OpenGL的功能及其两种学习路线...

    一.OpenGL是什么？.Open Graphics Library(开放的图形编程库）.调用图形硬件的程序接口 .大约150个函数组成，用户可以调用来完成各种绘图任务二.OpenGL能做什么？.变换（几何变化，投影，视口变换）.光照与材质.纹理映射.图形功能（anti-aliasing(反混淆），fog， blending(混合）....特效（Depth Cue(深度暗示），Motion...

  • 粗糙的世界:Jeff Molofee(NeHe) 的 OPENGL 教程-第十课

    这一课是由Lionel Brits (βtelgeuse)所写的。在本课中我们只对增加的代码做解释。当然只添加课程中所写的代码，程序是不会运行的。如果您有兴趣知道下面的每一行代码是如何运行的话，请下载完整的源码，并在浏览这一课的同时，对源码进行跟踪。  好了现在欢迎来到名不见经传的第十课。到现在为止，您应该有能力创建一个旋转的立方体或一群星星了，对3D编程也应该有些感觉了吧？但还是请等一下！不要立

  • OpenGL_Nehe(NeHe中文教程)pdf+源码

    OpenGL_Nehe(NeHe中文教程)pdf+源码。 pdf中有ppt形式的lesson01- lesson48 的讲解。 源码中有 lesson01- lesson48 中的代码。

  • NeHe OpenGL教程 （十四）

    第14课      图形字体:在一课我们将教你绘制3D的图形字体，它们可像一般的3D模型一样被变换。  这节课继续上一节课课的内容。在第13课我们学习了如何使用位图字体，这节课，我们将学习如何使用轮廓字体。 创建轮廓字体的方法类似于在第13课中我们创建位图字体的方法。但是，轮廓字体看起来要酷100倍！你可以指定轮廓字体的大小。轮廓字体可以在屏幕中以3D方式运动，而且轮廓

Global site tag (gtag.js) - Google Analytics