如何使用Angular $ http加载AudioBuffer? [英] How do I load an AudioBuffer with Angular $http?

问题描述

我正在开始使用Web Audio Api进行一些试验，希望了解如何在AngularJS中最好地使用它.

I am getting started with the Web Audio Api to experiment a little with it wanted to see how best to work with it in AngularJS.

我尝试过的其他Web Audio东西似乎可以在Angular中使用，例如创建Web音频正弦波等，但是如果我希望能够以最佳方式将我的音频加载到Angle中，我不确定使用Web Audio API对其进行操作

Other Web Audio stuff I have tried seems to work in Angular, such as creating a web audio sine wave etc, but I am just not sure of the best way to load audio in angular, if I then want to be able to manipulate it with the Web Audio API

我天真地尝试将某些函数直接放入似乎不太正确的AngularJS控制器中-下面的代码.

I naively tried to put some functions directly into a AngularJS Controller which doesn't seem right - code below.

在"Chrome开发者工具"的网络"标签中，我可以看到应加载的test.mp3通知无法加载响应数据".但是，该文件的路径是正确的，如果我在开发工具中单击此文件，则该文件将打开并开始播放.

In the Chrome Dev Tools Network tab I can see the test.mp3 that should load notifies 'Failed to load response data'. However the path to the file is correct, and if I click on this in the dev tools the file opens up and starts playing.

非常感谢您的帮助

// Controller and attempt to load audio
(function () {
'use strict';

angular
    .module('app')
    .controller('mvMainCtrl', mvMainCtrl);

mvMainCtrl.$inject = ['$resource', '$scope', '$http' ];

function mvMainCtrl($scope, $http, $resource) {


var ctx; //audio context 
var buf; //audio buffer 

//init the sound system 
function init() { 
  console.log("in init"); 
try { 
    ctx = new AudioContext(); 
    loadFile(); 
} catch(e) { 
    alert('you need webaudio support'); 
} 
} 


function loadFile() { 
  var req = new XMLHttpRequest(); 
  req.open("GET","/app/main/sounds/test.mp3",true); 
req.responseType = "arraybuffer"; 
req.onload = function() { 
    //decode the loaded data 
    ctx.decodeAudioData(req.response, function(buffer) { 
        buf = buffer; 
        play(); 
    }); 
}; 
req.send(); 
}


  loadFile();


 function playback() {
    var playSound = ctx.createBufferSource();
    playSound.buffer = buf;
    playSound.connect(ctx.destination);
    playSound.start(audioContext.currentTime);
 }


  playback();



 }
})();

推荐答案

我只是遇到了同样的问题，在这个问题上花费了几个小时之后，我终于找到了一种使它工作的方法:

I just had the same problem and after a couple of hours spent on this issue, I finaly found a way to get it work:

承诺风格:

$http({
    method: 'GET',
    url: url,
    responseType: 'arraybuffer'
}).then(function(response) {
    audioContext.decodeAudioData(response.data, function(buffer) {
        mainBuffer = buffer
    }, function(err) {
        console.log(err)
    })
})

标准样式:

$http({
    method: 'GET',
    url: url,
    responseType: 'arraybuffer'         
}).success(function(data) {
    audioContext.decodeAudioData(data, function(buffer) {
        mainBuffer = buffer
    }, function(err) {
        console.log(err)
    })
})

使用XMLHttpRequest()，文件已损坏，应将 responseType 属性指定为 arraybuffer .

With XMLHttpRequest(), the file was corrupt, and the responseType attribut should be specified as arraybuffer.

这篇关于如何使用Angular $ http加载AudioBuffer?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！