根据ebidel的答案,可以使用jDataView读取id3v1标签:
document.querySelector('input[type="file"]').onchange = function (e) {
var reader = new FileReader();
reader.onload = function (e) {
var dv = new jDataView(this.result);
// "TAG" starts at byte -128 from EOF.
// See http://en.wikipedia.org/wiki/ID3
if (dv.getString(3, dv.byteLength - 128) == 'TAG') {
var title = dv.getString(30, dv.tell());
var artist = dv.getString(30, dv.tell());
var album = dv.getString(30, dv.tell());
var year = dv.getString(4, dv.tell());
} else {
// no ID3v1 data found.
}
};
reader.readAsArrayBuffer(this.files[0]);
};
Chrome和其他浏览器现在已经实现了DataView(我只对Chrome感兴趣).我很好奇是否有人知道如何:
实时移动波形
我目前正在使用Web Audio API并使用画布制作光谱.
function animate(){
var a=new Uint8Array(analyser.frequencyBinCount),
y=new Uint8Array(analyser.frequencyBinCount),b,c,d;
analyser.getByteTimeDomainData(y);
analyser.getByteFrequencyData(a);
b=c=a.length;
d=w/c;
ctx.clearRect(0,0,w,h);
while(b--){
var bh=a[b]+1;
ctx.fillStyle='hsla('+(b/c*240)+','+(y[b]/255*100|0)+'%,50%,1)';
ctx.fillRect(1*b,h-bh,1,bh);
ctx.fillRect(1*b,y[b],1,1);
}
animation=webkitRequestAnimationFrame(animate);
}
迷你问题:有没有办法不写2次new Uint8Array(analyser.frequencyBinCount)？
DEMO
添加MP3/MP4文件并等待.(在Chrome中测试过)
但是有很多问题.我找不到各种音频滤镜的正确文档.
此外,如果您查看光谱,您会注意到在70%或范围之后没有数据.那是什么意思？可能从16k赫兹到20k赫兹没声音？我会在画布上应用一个文本来显示各种HZ.但是哪里？？
我发现返回的数据的长度为32,最大值为2048,高度始终为256.
但真正的问题是......我想创建一个像traktor一样的移动波形.
我不久前用PHP做过它,它将文件转换为低比特率而不是提取数据并将其转换为图像.我在某处发现了剧本...但我不记得在哪里......注意:需要LAME
<?php
$a=$_GET["f"];
if(file_exists($a)){
if(file_exists($a.".png")){
header("Content-Type: image/png");
echo file_get_contents($a.".png");
}else{
$b=3000;$c=300;define("d",3);
ini_set("max_execution_time","30000");
function n($g,$h){
$g=hexdec(bin2hex($g));
$h=hexdec(bin2hex($h));
return($g+($h*256));
};
$k=substr(md5(time()),0,10);
copy(realpath($a),"/var/www/".$k."_o.mp3");
exec("lame /var/www/{$k}_o.mp3 -f -m m -b 16 --resample 8 /var/www/{$k}.mp3 && lame --decode /var/www/{$k}.mp3 /var/www/{$k}.wav");
//system("lame {$k}_o.mp3 -f -m m -b 16 --resample …在我的客户端(带有浏览器的手机)上,我想查看服务器CPU,RAM和HDD的统计信息,并从各种日志中收集信息.
我正在使用ajax轮询.
在客户端每隔5秒(setInterval)我调用一个PHP文件:
扫描包含N个日志的文件夹
读取每个日志的最后一行
将其转换为JSON
最终的JSON数据小于5 KB,但我每5秒发送一次,每次都有标题和新连接,所以基本上每5秒,我必须发送5-10 KB才能获得5 KB 10-20 KB.
60 sec / 5 sec = 12如果我打开应用程序,这些是每分钟新的连接数和每小时约15 MB的流量.
假设我有100个用户,我可以监控/控制我的服务器,在一小时内将有大约1.5 GB的传出流量.
更不用说PHP服务器每5秒读取多个文件100次.
我需要在服务器上每隔5秒读取这些日志的最后几行并将它们写入文件,然后我想将这些数据推送到客户端,只要它已被更改.
使用PHP的SSE(服务器发送事件)
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
while(true){
echo "id: ".time()."\ndata: ".ReadTheLogs()."\n\n";
ob_flush();
flush();
sleep(1);
}
在这种情况下,在与第一个用户建立连接之后,连接保持打开(PHP不是为此而做的),因此我节省了一些空间(请求头,响应头).大多数服务器在我的服务器上的这项工作不允许长时间保持连接打开.
还有多个用户我多次读取日志.(减慢我的旧服务器)我无法控制服务器...我需要使用ajax发送命令...
我需要WebSockets !!!
node.js和websockets
使用node.js,据我所知,我可以做到这一切,而不需要消耗大量的资源和bandwich.连接保持打开,所以没有不必要的标题,我可以接收和发送data.it非常好地处理多个用户.
这就是我需要你帮助的地方.
node.js服务器应该在后台更新,并且如果文件被修改,则每5秒存储一次日志数据.应该用(iwatch,dnotify ...)操作系统
只有在更改后才能推送数据.
日志的读取应该在5秒后仅发生一次......所以不是每个用户触发的.
这是我发现的第一个例子......并且修改了..
var ws=require("nodejs-websocket");
var server=ws.createServer(function(conn){
var data=read(whereToStoreTheLogs);
conn.sendText(data)// send the logs data to the user
//on first connection.
setTimeout(checkLogs,5000);
/*
here …这是一个将jpg或png转换为webp的工作代码
谷歌的新图像格式平均比jpg或png小30-40%
1.打开Chrome
2.设置质量
3.在页面内删除图像
4.等待(取决于尺寸..先尝试小图片)
5.悬停图像以查看尺寸差异
6.要正确保存为webp,只需单击它即可
Basycally chrome添加了为toDataURL函数添加图像/ webp和质量的可能性
canvas.toDataURL('image/webp',quality(0-1))
压缩是太棒了.但我有一个小问题...... png不透明 ..
会是什么呢？也许将画布设置为透明？怎么样？
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
html,body{
width:100%;
height:100%;
margin:0;
padding:0;
display:-webkit-flex;
display: flex;
}
a{margin: auto;}
.imG{
max-width:800px;
max-height:400px;
}
form{
position:fixed;
bottom:0px;left:0px;
}
</style>
<script>
(function(W){
W.URL=W.URL||W.webkitURL;
var D;
function init(){
D=W.document;
D.body.addEventListener('dragstart',pdrop,false);
D.body.addEventListener('dragenter',pdrop,false)
D.body.addEventListener('dragover',pdrop,false);
D.body.addEventListener('dragleave',pdrop,false);
D.body.addEventListener('dragend',pdrop,false);
D.body.addEventListener('drop',drop,false);
}
function readablizeBytes(bytes) {
var s=['bytes','kB','MB','GB','TB','PB'],m=Math,e=m.floor(m.log(bytes)/m.log(1024));
return (bytes/Math.pow(1024,e)).toFixed(2)+" "+s[e];
}
function pdrop(e){
e.stopPropagation();
e.preventDefault();
}
function drop(e){
e.stopPropagation();
e.preventDefault();
console.log(e.dataTransfer.files[0]);
var …我不是100％肯定，但是从我通过websocket发送blob（二进制数据）时看到的内容来看，该blob不包含任何文件信息。（此外，官方规范指出，wesockets仅发送原始二进制文件）
我正在使用https://github.com/websockets/ws
测试：
直接从输入文件发送Blob。
ws.send(this.files[0]) //this should already contain the info
通过设置适当的mimetype文件，使用本地javascript api创建一个新的blob。
ws.send(new Blob([this.files[0]],{type:this.files[0].type})); //also this
双方都只能获得有效的斑点，而没有任何其他信息。
是否有可能追加一个4kb的预定义json数据，该数据也转换为包含mimetype和filesize等重要信息的二进制文件，然后在需要时将其拆分为4kb？
{“ mime”：“ txt /纯文本”，“大小”：345} ____________ 4KB_REST_OF_THE_BINARY
要么
ws.send({"mime":"txt\/plain","size":345})
ws.send(this.files[0])
即使第一个是最糟糕的解决方案，它也可以让我一次发送所有内容。
第二个有一个大问题：
这是一个聊天记录，允许同时发送文档，图像，音乐视频等文件。
在发送二进制数据之前，我可以在发送文件/用户信息时编写某种握手系统。
但
如果另一个人也发送了一个文件，因为它是异步的，则握手系统没有机会确定该文件对于正确的用户和模仿类型是正确的。
那么，如何在多用户异步环境中正确发送二进制文件？
我知道我可以转换为base64，但那要大30％。
顺便说一句 完全让Apple感到失望 ...虽然chrome可以正确显示每个二进制数据，但我的ios设备无法处理blob，只有图像将以blob或base64格式显示，甚至没有简单的txt文件。基本上只有<img>标签可以读取动态文件。
一切运作方式（现在）：
编辑
我现在所拥有的：
客户端1（发送文件）
fileInput.addEventListener('change',function(e){
var file=this.files[0];
ws.send(new Blob([file],{
type:file.type //<- SET MIMETYPE
}));
//file.size
},false);
注意：file已经是blob了……但是，这通常是您创建指定mimetype的新blob的方式。
服务器（将二进制数据广播到其他客户端）
aaaaa和mimetype消失了...
ws.addListener('message',function(binary){
var b=0,c=wss.clients.length;
while(b<c){
wss.clients[b++].send(binary) …众所周知,当我们在javascript中创建一个类时,普通函数返回类对象但事件返回事件对象而类对象丢失
function class(a){
this.name=a;
document.addEventListener('click',this.click,false);
xhr.addEventListener('load',this.xhr,false);
this.normal()
}
class.prototype={
click:function(e){
//e=event,this=theDocument //can't access class
},
xhr:function(e){
//e=event,this=theXHR //can't access class
},
normal:function(e){
//e=null,this=class
}
}
什么是将这些事件绑定到我们班级的最佳方式？
通过最好的方式,我的意思是没有或只是一个小参考,能够以本机方式删除事件(removeEventListener),绝对不会创建内存泄漏.
1.删除一个eventlistener你需要传递该函数作为参考,所以addEventListener('click',function(){alert('something')},false)不起作用.
2.i阅读引用var that=this内部函数创建泄漏,真的吗？
已知方式
function class(a){
this.name=a;
var that=this;// reference
//simply reference the whole object as a variable.
var bindedClick=this.click.bind(this);//bind the click to the class
//(js 1.85)
//can i use removeEventListener('click',bindedClick,false) later?
//apply && call (js 1.3)
}
因为我不是shure如果var that=this(因为它是整个对象)创建泄漏,有时我通过将信息保存到数组中最小化这个并作为参考我使用id ..
var class={};
var id='ID'+Date.now();
class[id].info={here i …我发现了一台旧PC,我想将它用作专用的Node.js测试机.
基本上我想在win机器上编写我的应用程序然后将它们通过samba复制到节点文件夹并通过ssh启动它们.稍后,我将添加一个upstart脚本并将其与samba一起复制到服务器,这样当我重新启动时,应用程序每次都会自动启动.
sudo apt-get install nodejs npm.编辑
经过一些测试后,我现在处于一个好点,这就是我所做的:
3 - 更新系统
sudo apt-get update && sudo apt-get upgrade
4-依赖关系
sudo apt-get install g++ curl libssl-dev apache2-utils git-core make
5安装节点
git clone git://github.com/ry/node.git
cd node
./configure
make
sudo make install
6-setup samba sudo nano /etc/samba/smb.conf
[nodejs]
comment = nodejs
workgroup = WG
security = USER
path = /var/nodejs
server string =Node …今天我在玩速记语法..发现了两种新的很酷的方法来编写冗长乏味的if语法，还学到了关于闭包的新东西......
这是我想出来的。
这是一个带有一个 eventHandler 的手风琴菜单的切换功能。
function h(e){
var p='parentNode',a=e.target,b=a[p],f=48,u='px',y=b[p];
!y.c||(y.c==b||(y.c.style.height=f+u,y.c.x=f)),
y.c=y.c==b?null:b,
a!=b.firstChild||(b.x=b.x>f?f:
(f+b.childNodes[1].offsetHeight),b.style.height=b.x+u)
}
这是示例。
http://jsfiddle.net/YjCbM/（使用 Chrome 29 测试）
有一个错误..这是工作http://jsfiddle.net/YjCbM/1/
在这个例子中，我使用 e.target、webkit css3 和其他各种 ie 和其他浏览器不支持的东西，但除此之外……这个速记语法在旧版/其他浏览器上是否有效？
ps.: 不要在 jsfiddle 中整理代码，否则无效
在我得到一些答案后编辑..
一些有用的速记
var W=window,D=W.document,G='getElementById',
E=W.addEventListener?'addEventListener':'attachEvent',
// this awesome as i don't use jQuery.
// this way i have a short getElementbyId() like jQuery's $()
// and also a ie compatible addEventListener.
a=D[G](x);
//document.getElementById(x)
a[E]('click',handler);
//a.addEventListener() or a.attachEvent()
a=x?y:x
//if x is defined, true, or …