首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >实时html5的mp3播放。再次体验数据格式arraybuffer。

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

作者头像
waki
发布2021-12-08 11:27:50
1.4K0
发布2021-12-08 11:27:50
举报
文章被收录于专栏:wakiwaki

问题一: 除了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');
}
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2020-10-19 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 成功代码:
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档