问题一: 除了fileReader对象可以获取arraybuffer数据(必须加载到file标签),还有XMLHttpRequest可以获取。
问题二: 不能直接播放mp3格式,必须使用button等主动点击(浏览器安全策略)。 解决:使用chome内核的electron(正常浏览器没搞定)。
未解决问题: 1、websocket不能返回arraybuffer格式。 2、ajax即使用了xhrFields属性来设置原生XMLHTTPRequest也不行(会直接跳过success方法)
参考:
<!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 variables
var 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 audio
play.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 element
pre.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');
}