实时html5的mp3播放。再次体验数据格式arraybuffer。

本文主要是介绍实时html5的mp3播放。再次体验数据格式arraybuffer。，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

问题一：
除了fileReader对象可以获取arraybuffer数据（必须加载到file标签），还有XMLHttpRequest可以获取。
在这里插入图片描述

问题二：不能直接播放mp3格式，必须使用button等主动点击（浏览器安全策略）。
解决：使用chome内核的electron（正常浏览器没搞定）。

在这里插入图片描述

未解决问题：
1、websocket不能返回arraybuffer格式。
2、ajax即使用了xhrFields属性来设置原生XMLHTTPRequest也不行（会直接跳过success方法）

在这里插入图片描述

成功代码：

参考：

AudioContext.decodeAudioData()

<!DOCTYPE html>
<html>
<head><title></title><script src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script>
</head>
<body><h1>websocket + ajax的模式</h1><h1 style="color: red">牛逼啊</h1><h1>完全成功的案例。通过阅读官方文档学到的（官方文档很重要）</h1><h3>完全解决了readAsDataURL、readAsArrayBuffer报不是blob格式的错误</h3><button class="play">播放</button><ol><li><button class="list">曾经最美</button></li><li><button class="list">大小姐</button></li></ol><button class="stop">暂停</button><!-- <div>pre</div> --><pre></pre><script type="text/javascript"></script><script type="text/javascript">// define variablesvar audioCtx = new (window.AudioContext || window.webkitAudioContext)();var source;var pre = document.querySelector('pre');var myScript = document.querySelector('script');var play = document.querySelector('.play');var stop = document.querySelector('.stop');//测试var wsServer = 'ws://139.224.194.158:9501';/** WebSocket服务连接*/var objSocket = new WebSocket(wsServer);objSocket.binaryType = 'arraybuffer';          //有没有这个东西呢？objSocket.onopen = function(evt) {console.log("Connected to WebSocket server.");};objSocket.onclose = function(evt) {console.log("Disconnected");};objSocket.onerror = function(evt) {console.log('Error occured: ' + evt.data);};objSocket.onmessage = function(evt) {onMessage(evt)};function onMessage(evt) { //websocket返回数据信息处理console.log('Retrieved data from server: ' + evt.data);var music_name = evt.data;getData(music_name);}function getData(music_name) {source = audioCtx.createBufferSource();var request = new XMLHttpRequest();// request.open('GET', './曾经最美.mp3', true);// request.open('GET', 'http://139.224.194.158:8084/%E6%88%91%E7%9A%84%E9%A1%B9%E7%9B%AE/%E4%BA%BA%E8%84%B8/%E8%BE%93%E5%87%BA%E4%BA%8C%E8%BF%9B%E5%88%B6.php', true);// request.open('GET', 'http://139.224.194.158:8084/%E6%88%91%E7%9A%84%E9%A1%B9%E7%9B%AE/%E4%BA%BA%E8%84%B8/'+ music_name, true);request.open('POST', 'http://139.224.194.158:8084/%E6%88%91%E7%9A%84%E9%A1%B9%E7%9B%AE/%E4%BA%BA%E8%84%B8/%E8%BE%93%E5%87%BA%E4%BA%8C%E8%BF%9B%E5%88%B6.php', true);request.responseType = 'arraybuffer';request.onload = function() {var audioData = request.response;audioCtx.decodeAudioData(audioData, function(buffer) {source.buffer = buffer;source.connect(audioCtx.destination);source.loop = true;source.start(0);    //这个鬼东西的位置还挺重要的。 【遇到问题：返回数据都对的，但就是不会播放】},function(e){"Error with decoding audio data" + e.err});}var data = new FormData();data.append('music_name', music_name);request.send(data);}// wire up buttons to stop and play audioplay.onclick = function() {$(this).text();// getData('曾经最美.mp3');objSocket.send('曾经最美');// objSocket.send('大小姐');// source.start(0);play.setAttribute('disabled', 'disabled');}stop.onclick = function() {if (String(source) !== 'undefined') {source.stop(0);}play.removeAttribute('disabled');}$('.list').click(function () {var music_name = $(this).text();if (String(source) !== 'undefined') {source.stop(0);}// console.log(source);objSocket.send(music_name);})//ajax即使用了xhrFields属性来设置原生XMLHTTPRequest也不行（会直接跳过success方法），function getData(music_name) {	//source = audioCtx.createBufferSource();$.ajax({url: 'http://139.224.194.158:8084/%E6%88%91%E7%9A%84%E9%A1%B9%E7%9B%AE/%E4%BA%BA%E8%84%B8/'+ music_name + '.mp3',// url: 'http://139.224.194.158:8084/%E6%88%91%E7%9A%84%E9%A1%B9%E7%9B%AE/%E4%BA%BA%E8%84%B8/%E8%BE%93%E5%87%BA%E4%BA%8C%E8%BF%9B%E5%88%B6.php',// type: 'POST',data: {music_name: music_name},async: false,xhrFields: {"responseType": "arraybuffer" },success: function (response) {var audioData = response;audioCtx.decodeAudioData(audioData, function(buffer) {source.buffer = buffer;source.connect(audioCtx.destination);source.loop = true;source.start(0);    //这个鬼东西的位置还挺重要的。 【遇到问题：返回数据都对的，但就是不会播放】},function(e){"Error with decoding audio data" + e.err});}});}// dump script to pre elementpre.innerHTML = myScript.innerHTML;
</script>
</body>
</html>

后端PHP：

<?php 
// echo "string";
$post = $_POST;
// var_export($post);
if (isset($post['music_name'])) {$music_name = $post['music_name'];echo file_get_contents('./'.$music_name.'.mp3');
}