专栏首页waki实时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 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');
}
本文参与 腾讯云自媒体分享计划 ,欢迎热爱写作的你一起参与!
本文分享自作者个人站点/博客:https://blog.csdn.net/thinkthewill复制
如有侵权,请联系 cloudcommunity@tencent.com 删除。
登录 后参与评论
0 条评论

相关文章

  • HTML5 直播协议之 WebSocket 和 MSE

    今天我要向大家介绍一下 WebSocket 与 MSE 相关的内容, 并在最后通过一个实际的例子, 来展示其具体的用法.。

    徐祖亮
  • 全面进阶 H5 直播

    如果我们想要理解 HTML5 视频,首先需要知道,你应该知道,但你不知道的内容?那怎么去判断呢?

    腾讯IVWEB团队
  • 无 Flash 时代,让直播拥抱 H5(一)

    villainhr
  • HTML5 标签audio添加网页背景音乐代码

    html5 <audio> 是 HTML 5 的新标签,定义声音,比如音乐或其他音频流。

    阳光岛主
  • 【Web技术】502- Web 视频播放前前后后那些事

    这是因为当时没有其他方法可以在浏览器上流式传输视频。作为用户,您可以选择安装Flash或Silverlight之类的第三方插件,还是根本无法播放任何视频。

    pingan8787
  • 从零开始学 Web 之 HTML5(一)HTML5概述,语义化标签

    html5 不是一门新的语言,而是我们之前学习的 html 的第五次重大修改版本。

    Daotin
  • 以HTML5及其衍生技术为基础的B/S架构实时视频监控解决方案

    安防类项目中通常都有视频监控方面的需求。视频监控客户端主要是Native应用的形式,在Web端需要利用 NPAPI、ActiveX 之类的插件技术实现。但是,I...

    EasyNVR
  • ArrayBuffer简析

    Peter Lu
  • ​SoundCloud的web播放库Maestro演进之路

    在SoundCloud,我们希望可以支持所有现代网络浏览器、移动浏览器和IE 11。我们的目标是利用浏览器提供的功能提供最佳的播放体验。

    LiveVideoStack
  • Web Audio API 介绍和 web 音频应用案例分析

    本篇文章首先介绍了Web Audio API相关概念、常用的几个接口节点,以便不熟悉Web Audio的开发人员有个了解。后面主要分析了3个Web Audio ...

    QQ音乐技术团队
  • EasyDSS功能简介---实时数据统计报表、视频文件上传、点播、分享、集成

    为了更好的用户体验和和功能的完善,我们在EasyDSS的基础上增添了服务器硬件数据报表(CPU、内存、磁盘空间)、网络流量数据的统计以及角色分配,直播间、点播文...

    EasyNVR
  • Audio Unit录音(播放伴奏+耳返)

    前言 相关文章: 使用VideoToolbox硬编码H.264 使用VideoToolbox硬解码H.264 使用AudioToolbox编码AAC 使...

    落影
  • HTML5新增的标签与属性

    HTML5 不基于 SGML,所以不需要引用 DTD(HTML 4.01 基于 SGML)

    Leophen
  • 不再碎片化学习,快速掌握 H5 直播技术

    villainhr
  • FLV提取AAC音频单独播放并实现可视化的频谱

    音频数字化就是将模拟的(连续的)声音波形数字化(离散化),以便利用数字计算机进行处理的过程,主要参数包括采样频率(Sample Rate)和采样数位/采样精度(...

    smy
  • 盘点大厂的那些开源项目 - 哔哩哔哩

    哔哩哔哩现为中国年轻世代高度聚集的文化社区和视频平台,被粉丝们亲切地称为“B站”。

    全球技术精选
  • 使用flv.js做直播

    为什么要在这个时候探索flv.js做直播呢?原因在于各大浏览器厂商已经默认禁用Flash,之前常见的Flash直播方案需要用户同意使用Flash后才可以正常使用...

    IMWeb前端团队
  • 理论 | 使用flv.js做直播

    为什么要在这个时候探索flv.js做直播呢?原因在于各大浏览器厂商已经默认禁用Flash,之前常见的Flash直播方案需要用户同意使用Flash后才可以正常使用...

    用户1097444

扫码关注腾讯云开发者

领取腾讯云代金券