实时html5的mp3播放。再次体验数据格式arraybuffer。 |
您所在的位置：网站首页 › predocument › 实时html5的mp3播放。再次体验数据格式arraybuffer。 |
实时html5的mp3播放。再次体验数据格式arraybuffer。
|
问题一： 除了fileReader对象可以获取arraybuffer数据（必须加载到file标签），还有XMLHttpRequest可以获取。 问题二： 不能直接播放mp3格式，必须使用button等主动点击（浏览器安全策略）。 解决：使用chome内核的electron（正常浏览器没搞定）。
未解决问题： 1、websocket不能返回arraybuffer格式。 2、ajax即使用了xhrFields属性来设置原生XMLHTTPRequest也不行（会直接跳过success方法）
参考： AudioContext.decodeAudioData() websocket + ajax的模式 牛逼啊 完全成功的案例。通过阅读官方文档学到的（官方文档很重要） 完全解决了readAsDataURL、readAsArrayBuffer报不是blob格式的错误 播放 曾经最美 大小姐 暂停 // 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;后端PHP： |
【本文地址】