PC页面播放Mp3文件异步请求：

业务中需求，操作需要，页面点击播放mp3文件，要求点击播放，播放时点击，停止！

1.服务端代码实现如下(使用springmvc)：

 @RequestMapping("/listening")
    public void myWorkPage(String dfsAttachPath, HttpServletRequest request, HttpServletResponse response) {
//        请求参数：dfsAttachPath = "springSong.mp3";
        try {
            // 文件服务器地址
            String url = "http://172.16.5.104:8888/" + dfsAttachPath;
            CloseableHttpResponse closeableHttpResponse = HttpClientUtil.httpOrHttpsGetHttpResponse(urlPath);
            long length = closeableHttpResponse.getEntity().getContentLength();
            InputStream is = closeableHttpResponse.getEntity().getContent();

//            此处是采用本地文件进行测试
//            File file = new File("E:\\springSong.mp3");
//            InputStream is = new FileInputStream(file);
//            long length = file.length();

            response.addHeader("Content-Length", length + "");
            response.addHeader("Content-Type", "audio/mpeg;charset=UTF-8");
            ServletOutputStream os = response.getOutputStream();
            int len;
            byte[] b = new byte[2048];
            while ((len = is.read(b)) != -1) {
                os.write(b, 0, len);
            }
            is.close();
            os.close();
        } catch (Exception e) {
            logger.error("===========获取音频文件失败===========",e);
        }
    }

2.前端代码如下：

页面图片按钮：

<img alt='播放' src='../../images/audio/play.png' width='18' class='playAudio'/>

js部分代码(使用jquery)：

vvar AudioContext = window.AudioContext || window.webkitAudioContext || window.mozAudioContext || window.msAudioContext || window.oAudioContext;
var audioCtx = AudioContext ? new AudioContext() : '';
var source = null;
// Jquery监听图片按钮
$(document).on('click','img.playAudio',function(){
    var obj = $(this);
    if(obj.hasClass('running')){
        if(source){
            source.stop()
            // source.currentTime = 0; //如只暂停则不需要此行
        }
        return;
    }
    var audioPath = obj.siblings('span').text(); // 此变量是音频文件名springSong.mp3
    var playIcon = '../../images/audio/play.png';
    obj.addClass('running'); // 只为区别是否在播放音频springSong.mp3
    var urlPath = "/messageCenter/listening?dfsAttachPath=" + encodeURIComponent(audioPath);
    var type = "GET";
// 此处只能使用原生ajax请求后台回去音频流，不能使用jquery的ajax
    var xhr = new XMLHttpRequest();
    xhr.open(type, urlPath);
    xhr.responseType = 'arraybuffer';// 返回type必须是arrayBuffer
    xhr.onload = function(e) {
        var res = this.response;
        if (res) {
            try{
                // 处理音频代码，播放音频
                audioCtx.decodeAudioData(res, function(buffer){
                    createSound(buffer, obj)
                })
            }catch(err){
                layer.msg('浏览器不支持播放音频');
            }
        }
    };
    xhr.onerror = function() {
        obj.attr('src', playIcon);
        obj.removeClass('running');
        layer.msg('音频加载失败..');
    };
    xhr.send();

});

// 播放音频的操作
function createSound(buffer, obj) {
    if (audioCtx.state != 'running') {
        console.log('重启audioCtx');
        audioCtx.resume();
    }
    var playIcon = '../../images/audio/play.png';
    var stopIcon = '../../images/audio/stop.png';
    obj.attr('src',stopIcon);
    var analyser = audioCtx.createAnalyser();
    var gainNode = audioCtx.createGain();
    source = audioCtx.createBufferSource();
    source.buffer = buffer;
    source.connect(analyser);
    analyser.connect(gainNode);
    gainNode.connect(audioCtx.destination);
    source.loop = false;
    source.start(0); // 播放
    source.addEventListener('ended', function (event){
        obj.attr('src', playIcon );
        obj.removeClass('running');
    });
}