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

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

目录
相关文章
|
Java API 数据库
构建RESTful API已经成为现代Web开发的标准做法之一。Spring Boot框架因其简洁的配置、快速的启动特性及丰富的功能集而备受开发者青睐。
【10月更文挑战第11天】本文介绍如何使用Spring Boot构建在线图书管理系统的RESTful API。通过创建Spring Boot项目,定义`Book`实体类、`BookRepository`接口和`BookService`服务类,最后实现`BookController`控制器来处理HTTP请求,展示了从基础环境搭建到API测试的完整过程。
678 4
|
人工智能 前端开发 API
Gemini Coder:基于 Google Gemini API 的开源 Web 应用生成工具,支持实时编辑和预览
Gemini Coder 是一款基于 Google Gemini API 的 AI 应用生成工具,支持通过文本描述快速生成代码,并提供实时代码编辑和预览功能,简化开发流程。
1344 38
Gemini Coder:基于 Google Gemini API 的开源 Web 应用生成工具,支持实时编辑和预览
|
人工智能 搜索推荐 IDE
突破网页数据集获取难题:Web Unlocker API 助力 AI 训练与微调数据集全方位解决方案
本文介绍了Web Unlocker API、Web-Scraper和SERP API三大工具,助力解决AI训练与微调数据集获取难题。Web Unlocker API通过智能代理和CAPTCHA绕过技术,高效解锁高防护网站数据;Web-Scraper支持动态内容加载,精准抓取复杂网页信息;SERP API专注搜索引擎结果页数据抓取,适用于SEO分析与市场研究。这些工具大幅降低数据获取成本,提供合规保障,特别适合中小企业使用。粉丝专属体验入口提供2刀额度,助您轻松上手!
923 2
|
人工智能 运维 安全
网络安全公司推荐:F5荣膺IDC全球Web应用与API防护领导者
网络安全公司推荐:F5荣膺IDC全球Web应用与API防护领导者
483 4
|
XML JSON API
Understanding RESTful API and Web Services: Key Differences and Use Cases
在现代软件开发中,RESTful API和Web服务均用于实现系统间通信,但各有特点。RESTful API遵循REST原则,主要使用HTTP/HTTPS协议,数据格式多为JSON或XML,适用于无状态通信;而Web服务包括SOAP和REST,常用于基于网络的API,采用标准化方法如WSDL或OpenAPI。理解两者区别有助于选择适合应用需求的解决方案,构建高效、可扩展的应用程序。
|
数据采集 API 开发工具
从 0 到 1 掌握鸿蒙 AudioRenderer 音频渲染:我的自学笔记与踩坑实录(API 14)
本文详细介绍了在 HarmonyOS 中使用 AudioRenderer 开发音频播放功能的完整流程。从环境准备(SDK 5.0.3、DevEco Studio 5.0.7)到核心概念(状态机模型、异步回调),再到开发步骤(实例创建、数据回调、状态控制),结合代码示例与常见问题解决方法,帮助开发者掌握 AudioRenderer 的底层控制与定制化能力。同时,文章还提供了性能优化建议(多线程处理、缓冲管理)及学习路径,附带官方文档和示例代码资源,助你快速上手并避开常见坑点。
626 7
|
机器学习/深度学习 开发框架 API
Python 高级编程与实战:深入理解 Web 开发与 API 设计
在前几篇文章中,我们探讨了 Python 的基础语法、面向对象编程、函数式编程、元编程、性能优化、调试技巧以及数据科学和机器学习。本文将深入探讨 Python 在 Web 开发和 API 设计中的应用,并通过实战项目帮助你掌握这些技术。
|
Kubernetes 安全 Devops
有效抵御网络应用及API威胁,聊聊F5 BIG-IP Next Web应用防火墙
有效抵御网络应用及API威胁,聊聊F5 BIG-IP Next Web应用防火墙
396 10
有效抵御网络应用及API威胁,聊聊F5 BIG-IP Next Web应用防火墙
|
前端开发 API 开发者
Python Web开发者必看!AJAX、Fetch API实战技巧,让前后端交互如丝般顺滑!
在Web开发中,前后端的高效交互是提升用户体验的关键。本文通过一个基于Flask框架的博客系统实战案例,详细介绍了如何使用AJAX和Fetch API实现不刷新页面查看评论的功能。从后端路由设置到前端请求处理,全面展示了这两种技术的应用技巧,帮助Python Web开发者提升项目质量和开发效率。
453 1
|
JSON API 数据格式
如何使用Python和Flask构建一个简单的RESTful API。Flask是一个轻量级的Web框架
本文介绍了如何使用Python和Flask构建一个简单的RESTful API。Flask是一个轻量级的Web框架,适合小型项目和微服务。文章从环境准备、创建基本Flask应用、定义资源和路由、请求和响应处理、错误处理等方面进行了详细说明,并提供了示例代码。通过这些步骤,读者可以快速上手构建自己的RESTful API。
998 2

热门文章

最新文章