关于一点小小的技术分享

最新推荐文章于 2023-12-11 08:00:31 发布

qq_34328096

最新推荐文章于 2023-12-11 08:00:31 发布

阅读量383

点赞数 1

分类专栏： javascript ajax

javascript 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

ajax

1 篇文章 0 订阅

订阅专栏

无意间看到这样一个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();
        }

    </script>
</head>
<body>
<input id="button" type="button" name="test" οnclick="play()" value="播放">
</body>
</html>

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

qq_34328096

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于一点小小的技术分享

无意间看到这样一个api WEB音频API。是使用JavaScript来动态的加载音频资源，交互效果不错。尤其是对于网页游戏开发于是，话不多说，我来一个小例子。html>head> meta charset="utf-8"> title>WEB音频API测试title> script> function play(){
复制链接

扫一扫