WEBプログラミング出来ない俺がHFS ~ HTTP File Serverで自宅PCの動画と音楽をストリーミング再生？できるようにした

Windowsで簡単にファイルサーバに特化したHTTPサーバを立ち上げるためのソフトHFS ~ HTTP File Serverで、動画ファイルと音楽ファイルをストリーミング再生できるようにテンプレートを編集した。

Apacheとかで自鯖立てるのめんどくせーって人におすすめ。

DJとか外出先で、自宅PCのHDD内に入っている曲がいくつか欲しい！って状況になった時用に、HFSでDLできるようにしていた。

しかし、曲を再生する為にはDLを完了させる必要があるので、ちょっとだけ聴きたい（DJで使用するためにイントロと間奏の拍だけ確認したい時等）に面倒だった。

先日HTML5で追加されたというaudioタグとvideoタグの存在を知った。

f:id:arisane:20160202010328p:plain

Expert modeに変更し、MenuからHTML templateを選択する。

<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>{.!HFS.} %folder%</title>
<link rel="stylesheet" href="/?mode=section&id=style.css" type="text/css">
<script type="text/javascript" src="/?mode=jquery"></script>
<link rel="shortcut icon" href="/favicon.ico">
<style class='trash-me
.onlyscript, button[onclick] { display:none; }
</style>
<script>
// this object will store some %symbols% in the javascript space, so that libs can read them
HFS = { folder:'{.js encode|%folder%.}', number:%number%, paged:{.!option.paged.} };
</script>
<script type="text/javascript" src="/?mode=section&id=lib.js"></script>
<script language="javascript" type="text/javascript">
function hogeMusic(url) {
var obj = window.open();
obj.document.open();
obj.document.write("<html><body><audio src=");
obj.document.write(url);
obj.document.write(" controls>Music</audio></body></html>");
obj.document.close();
}
function hogeVideo(url) {
var obj = window.open();
obj.document.open();
obj.document.write("<html><body><video src=");
obj.document.write(url);
obj.document.write(" controls>Music</video></body></html>");
obj.document.close();
}
</script>
</head>

function名とか適当

[list]
<div id='files_outer'>
<div style='height:1.6em;'></div> {.comment| this is quite ugly, i know, but if i use any vertical padding with height:100% i'll get a scrollbar .}
{.if not| %number% |{: <div style='font-size:200%; padding:1em;'>{.!No {.if|{.length|{.?search.}.}|results|files.}.}</div> :}|{:
<form method='post'>
<table id='files'>
{.set|sortlink| {:<a href="{.trim|
{.get|url|sort=$1| {.if| {.{.?sort.} = $1.} | rev={.not|{.?rev.} .} /if.} /get.}
/trim.}">{.!$2.}{.if| {.{.?sort.} = $1.} | &{.if|{.?rev.}|u|d.}arr;.}</a>:} .}
<th>{.^sortlink|n|Name.}{.^sortlink|e|.extension.}
<th>Music
<th>Video
<th>{.^sortlink|s|Size.}
<th>{.^sortlink|t|Timestamp.}
%list%
</table>
</form>
:}.}
</div>

MusicとVideo再生用ボタンを表示するので追加しとく

[file=folder=link|private]
<tr class='{.if|{.mod|{.count|row.}|2.}|even.}'><td>
<input type='checkbox' class='selector' name='selection' value="%item-url%" {.if not|{.or|{.get|can delete.}|{.get|can access.}|{.get|can archive item.}.}|disabled='disabled'.} />
{.if|{.get|is new.}|<span class='flag'> NEW </span>.}
{.if not|{.get|can access.}|<img src='/~img_lock'>.}
<a href="%item-url%"><img src="%item-icon%"> %item-name%</a>
{.if| {.length|{.?search.}.} |{:{.123 if 2|<div class='item-folder'>{.!item folder.} |{.breadcrumbs|{:<a href="%bread-url%">%bread-name%/</a>:}|from={.count substring|/|%folder%.}/breadcrumbs.}|</div>.}:} .}
{.123 if 2|<div class='comment'>|{.commentNL|%item-comment%.}|</div>.}
<td><input id="Submit1" type="button" value="Music" onclick="return hogeMusic("%item-url%")" />
<td><input id="Submit2" type="button" value="Video" onclick="return hogeVideo("%item-url%")" />