本文转载至 http://www.webhek.com/web-audio-api

很偶然的，在一个微信公众号里面，看到了这样的一篇文章。

WEB音频API。作者分享技术的优良品质值得我们学习。

原文讲述的大致是这样的，使用JavaScript来动态的加载音频资源，这样来起到一个不错的交互效果。尤其是对于网页游戏开发而言，这一点也是很重要的。

于是，我就翻译了一下，并写了个小例子。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>WEB音频API测试</title>
    <script>
        function play(){
            alert('即将播放音频！');
            //创建音乐播放的上下文实例,适配手机和PC
            var audioContext = new (window.AudioContext||window.webkitAudioContext)();
            //为即将到来的音频文件创建一个缓冲区
            var source = audioContext.createBufferSource();
            //创建Ajax请求对象，用于向服务器请求音频资源
            var request = new XMLHttpRequest();
            // 使用非异步请求方式，来请求音频资源
            request.open('GET','./TheMountain.mp3',true);
            // 设置服务器即将返回的类型，便于浏览器解码
            request.responseType = 'arraybuffer';
            request.onload = function(){
                //一旦请求内容完整返回就开始解码
                audioContext.decodeAudioData(request.response,function(buffer){
                    source.buffer = buffer;
                    //连接音频资源，正式播放
                    source.connect(audioContext.destination);
                    //设置为循环播放模式
                    source.loop = true;
                    // 等待零秒后播放
                    source.start(0);
                },function(e){
                    alert('Audio Error!',e);
                })
            }
            // 开启ajax请求
            request.send();
        }

        //window.onload = function(){
        //  play();
        //}
    </script>
</head>
<body>
<input id="button" type="button" name="test" onclick="play()" value="播放">
</body>
</html>

注意，音频资源存放在服务器上的位置很重要，路径可不能写错咯。然后就是注意ajax的不能跨域请求的原则即可。

希望能让更多有此需求的人看得到，造福更多的人。

WEB音频API的更多相关文章

  1. Waud.js – 使用HTML5降级处理的Web音频库

    Waud.js 是一个Web音频库,有一个HTML5音频降级处理方案. 它允许您利用Web音频API为你的Web应用程序控制音频功能.在不支持Web音频API的非现代浏览器使用HTML5音频降级方案. ...

  2. 关于HTML5音频——audio标签和Web Audio API各平台浏览器的支持情况

    对比audio标签 和 Web Audio API 各平台浏览器的支持情况:   audio element Web Audio API desktop browsers Chrome 14 Yes  ...

  3. 【HTML5】Web Audio API打造超炫的音乐可视化效果

    HTML5真是太多炫酷的东西了,其中Web Audio API算一个,琢磨着弄了个音乐可视化的demo,先上效果图: 项目演示:别说话,点我!  源码已经挂到github上了,有兴趣的同学也可以去st ...

  4. 关于Web Audio API的入门

    Web Audio API提供了一个简单强大的机制来实现控制web应用程序的音频内容.它允许你开发复杂的混音,音效,平移以及更多. 可以先看一下MDN的这篇文章<Web Audio API的运用 ...

  5. 使用Web Audio API绘制音波图

    摘要:Web Audio API是对<audio> 标签功能上的补充,我们可以用它完成混音.音效.平移等各种复杂的音频处理,本文简单的使用其完成音波图的绘制. PS:本例子使用ES6编程, ...

  6. H5的Web Audio Api

    概述 研究Web Audio Api的主要原因是:工作中需要在ios中实现声音的淡出效果,主要是通过setInterval来改audio标签的volume属性实现的,但是ios上面volume属性是只 ...

  7. Web Audio API之手把手教你用web api处理声音信号:可视化音乐demo

    1.Web Audio API 介绍 Web Audio API 提供了在Web上控制音频的一个非常有效通用的系统 ,这些通用系统通俗的讲就是我们可以利用Web Audio API提供的各种方法操作各 ...

  8. HTML5 ——web audio API 音乐可视化(二)

    上一篇 web audio API 音乐可视化(一)介绍了一些基本的API,以及如何简单的播放一个音频,本篇介绍一下怎么对获取到的音频进行分析,并将分析后的数据绘制成图像. 最终效果请戳这里; 完整版 ...

  9. HTML5 ——web audio API 音乐可视化(一)

    使用Web Audio API可以对音频进行分析和操作,最终实现一个音频可视化程序. 最终效果请戳这里; 完整版代码请戳这里,如果还看得过眼,请给一个start⭐ 一.API AudioContext ...

随机推荐

  1. java中的链表编写

    通过while循环取出节点内容 class Node{//定义一个节点类,用于保存数据和取得下一个节点 private String data;//节点中数据 private Node next;// ...

  2. [LeetCode] Repeated String Match 重复字符串匹配

    Given two strings A and B, find the minimum number of times A has to be repeated such that B is a su ...

  3. 什么是HTTP Referer？

    什么是Referer? Referer是 HTTP请求header 的一部分,当浏览器(或者模拟浏览器行为)向web 服务器发送请求的时候,头信息里有包含 Referer.比如我在www.sojson ...

  4. [AHOI 2016初中组]迷宫

    Description 小雪和小可可被困在了一个无限大的迷宫中. 已经知道这个迷宫有 N 堵环状的墙,如果把整个迷宫看作是一个二维平面,那么每一堵墙都是平面上一个圆.任意两个圆不相交,不重合,也不会相 ...

  5. 洛谷P3159 [CQOI2012]交换棋子

    巧妙的拆点方式,首先把1看成黑点,0看成空的,几次交换就可以看成一条路径 1)从容量上看,这条路径为1-2-2-2-2-2----2-1 2)从费用上看,这条路径每条边费用都是1 于是用一种巧妙的拆点 ...

  6. ●BZOJ 2005 NOI 2010 能量采集

    题链: http://www.lydsy.com/JudgeOnline/problem.php?id=2005 题解: 一个带有容斥思想的递推.%%% 首先,对于一个点 (x,y) 在路径 (0,0 ...

  7. hdu 5458 Stability(树链剖分+并查集)

    Stability Time Limit: 3000/2000 MS (Java/Others)    Memory Limit: 65535/102400 K (Java/Others)Total ...

  8. 【Uva 11280 飞到弗雷德里顿】

    ·你可以尽情地坐飞机,但停留次数遭到限制. ·英文题,述大意:       给出一张有向图,起点是输入的第一个城市,终点是输入的最后一个城市.给出q个询问,每个询问含一个t,表示 #include&l ...

  9. 对中断的理解handle_level_irq【原创】

    如下为本人原创,在解决问题的过程中的一点心得,如果有描述不准确的地方还请各位指出,非常感谢 Linux内核版本:linux-4.9.18 曾有一次调试触摸屏的时候遇到如下的问题 /startup/mo ...

  10. UDA机器学习基础—误差原因

    1.模型误差产生的原因 (1)模型无法表示基本数据的复杂度,而造成偏差. (2)因模型对训练它所用到的数据过度敏感造成的方差. 2.由偏差造成的误差--准确率和欠拟合 有足够数据表示模型,但是由于模型 ...