WEB音频API

简介: 本文转载至 http://www.webhek.com/web-audio-api很偶然的,在一个微信公众号里面,看到了这样的一篇文章。 WEB音频API。作者分享技术的优良品质值得我们学习。

本文转载至 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的不能跨域请求的原则即可。

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

目录
相关文章
|
14天前
|
开发框架 监控 .NET
Visual Basic的Web服务和REST API开发指南
【4月更文挑战第27天】本文探讨了使用Visual Basic(VB.NET)构建Web服务和RESTful API的方法。首先介绍了Web服务的基础和REST API的概念,然后阐述了.NET Framework与.NET Core/.NET 5+对VB.NET的支持,以及ASP.NET Core在Web开发中的作用。接着,详细讲解了创建RESTful API的步骤,包括控制器与路由设置、模型绑定与验证,以及返回响应。此外,还讨论了安全措施、测试方法、部署选项和监控策略。最后强调,VB.NET开发者可以通过ASP.NET Core涉足现代Web服务开发,拓宽技术领域。
|
11天前
|
弹性计算 JSON Shell
基于Web API的自动化信息收集和整理
【4月更文挑战第30天】
19 0
|
13天前
|
JSON 安全 API
【专栏】四种REST API身份验证方法:基本认证、OAuth、JSON Web Token(JWT)和API密钥
【4月更文挑战第28天】本文探讨了四种REST API身份验证方法:基本认证、OAuth、JSON Web Token(JWT)和API密钥。基本认证简单但不安全;OAuth适用于授权第三方应用;JWT提供安全的身份验证信息传递;API密钥适合内部使用。选择方法时需平衡安全性、用户体验和开发复杂性。
|
15天前
|
缓存 前端开发 API
toapi,一个强大的 Python Web API库!
toapi,一个强大的 Python Web API库!
27 5
|
23天前
|
JSON API 数据库
解释如何在 Python 中实现 Web 服务(RESTful API)。
在Python中实现Web服务(RESTful API)涉及选择框架(如Flask、Django、FastAPI),定义路由及处理函数(对应HTTP请求方法),处理请求,构建响应和启动服务器。以下是一个使用Flask的简单示例:定义用户列表,通过`@app.route`装饰器设置GET和POST请求处理函数,返回JSON响应,并用`app.run()`启动服务器。实际API会包含更复杂的逻辑和错误处理。
16 1
|
2月前
|
XML JSON API
通过Flask框架创建灵活的、可扩展的Web Restful API服务
通过Flask框架创建灵活的、可扩展的Web Restful API服务
|
2月前
|
缓存 监控 API
Python Web框架FastAPI——一个比Flask和Tornada更高性能的API框架
Python Web框架FastAPI——一个比Flask和Tornada更高性能的API框架
60 0
|
2月前
|
JSON API 数据格式
构建高效Python Web应用:Flask框架与RESTful API设计实践
【2月更文挑战第17天】在现代Web开发中,轻量级框架与RESTful API设计成为了提升应用性能和可维护性的关键。本文将深入探讨如何使用Python的Flask框架来构建高效的Web服务,并通过具体实例分析RESTful API的设计原则及其实现过程。我们将从基本的应用架构出发,逐步介绍如何利用Flask的灵活性进行模块化开发,并结合请求处理、数据验证以及安全性考虑,打造出一个既符合标准又易于扩展的Web应用。
685 4
|
3月前
|
前端开发 JavaScript API
前端秘法番外篇----学完Web API,前端才能算真正的入门
前端秘法番外篇----学完Web API,前端才能算真正的入门
|
3月前
|
API 网络架构
解释 RESTful API,以及如何使用它构建 web 应用程序。
解释 RESTful API,以及如何使用它构建 web 应用程序。
89 0