3.音楽アプリ開発

オンライン作曲アプリ「Web Piano Roll!!」にステップ入力機能がつきました

先月まで忙しかった&また忙しくなりそうなので、今のうちにやってみたかったことをやってみよう月間をどうにかまだ送っております。
ということで、勢いで作ってみたオンライン作曲アプリ「Web Piano Roll!!」β版をバージョンアップしました。

相変わらず、Chrome、Firefoxで主に確認しています。

version 0.2(β版) 主な変更点

・ステップ入力機能
 →メイン画面右上「Step」ボタンより、ステップ入力機能が使用できるようになりました。
・スペースキーによる再生・停止機能
・ピアノロールタテ軸・ヨコ軸の拡大縮小機能
 →ステップ入力しようとしたところ、拡大縮小が欲しくなったのでつけました。
・MIDIエクスポート機能の修正
 →複数トラックの書き出しが正常に行えない場合があった問題を対応しています。

キーボードでステップ入力できるようになったので、入力がだいぶ速く行えるようになりました。
キーボードがないタブレットなど用の機能として、画面上の鍵盤を押しても入力できるようにしています。
その代わり動作が若干重くなった感があります…。
結構無理矢理実装しているところがありますので、ちょこちょこ見直していきたいところです。

ヘルプページを書き直さないとなあ…と思っているところです。

動作が妙なところなどありましたらどうぞお知らせください!!

スポンサードリンク

オンライン作曲アプリ「Web Piano Roll!!」β版を公開しました。

先月まで忙しかった&また忙しくなりそうなので、今のうちにやってみたかったことをやってみよう月間を送っております。
ということで、勢いで作ってみたオンライン作曲アプリ「Web Piano Roll!!」β版を公開しました!

version 0.0(β版) 主な機能

・ピアノロール機能(今のところ4小節)
・Web Audio APIによる再生機能
・データファイルによる保存・読み込み機能
・MIDIエクスポート機能

各ブラウザの対応状況

各ブラウザの対応状況はこんな感じです。

・推奨ブラウザ:PC/mac版Chrome、PC/mac版Firefox
主にmac版ChromeとFirefoxで動作検証しました。
上に記載している「主な機能」が一通り動きますので、よろしければ使ってみてください!!
動きがおかしいところなどありましたらtwitter@fumikomidoriまでお寄せください。

・一部機能制限ありブラウザ(ファイル保存機能以外はだいたい動きます):mac/iOS版Safari
mac/iiPad版Safariで動作検証しました。
データファイルとMIDIファイルの保存機能以外は普通に動作します。
データファイル内のテキストデータを保存しておけば、PC版にテキストデータを送ってMIDIエクスポート…みたいな使用方法が可能です。

・だいたい動きそうなブラウザ:Android版Chrome
だいぶ古いバージョンのAndroid版Chromeで動かしてみました。
あまり細かく確認できていませんが、だいたい動きそうです。

・ほぼほぼまともに動かないブラウザ:IE、edge
画面を開いた時点でsvgファイルに対応していなくて画面がまともに表示されないので、もう諦めました。

今後こんな対応をしたらいいかもしれないと思っていること

いつやるか、とかはまったくの未定です…。
・楽曲の小節数を増減する機能
・ピアノロールの拡大縮小機能
・3拍子対応
・ドラムトラック対応

スポンサードリンク

サイトで使用しているhtml5 audio playerを新しくしました

サイトで使用しているhtml5 audio playerを新しくしました。
もともと使用していたものがpjaxでうまく動かない部分があるので、新しいものに順次置き換えていく予定です。
いろいろ探してみたのですが、結局自作audio playerです。

一応下記の環境で確認しました。
・mac版chrome
・mac版firefox
・mac版safari
・windows版edge
・iOS 9.2(音量調整に対応していないので音量調整非表示です)
・Android 5.1(音量調整に対応していないので音量調整非表示です)

うまく動かない…という環境があればどうぞお知らせください!!

20160403_01.png

スポンサードリンク

javascriptで音声波形表示サンプルプログラム(wavesurfer.js)

音声ファイルの波形が表示したい!!!

ということで、音声ファイルの波形を表示できるライブラリ「wavesurfer.js」と、HTML5 File APIを使って、ローカル音声ファイルの波形を表示するプログラムを作ってみました。

→サンプルプログラムのみを大きく表示

<使い方>
お手持ちの音声ファイルをFinder/Exploerから選択し、緑の枠部分にドラッグ&ドロップしてください。波形が表示され、音声が再生されます。
各ボタンで再生の操作ができます。
start:現在の位置から再生します。
pause:再生を停止します。
restart:先頭位置から再生します。

20160220_01.png

<おことわり>
mac版&windows版firefox/chromeでwav/mp3/ogg、mac版safariでwav/mp3の動作を確認しています。
wavファイルはビットレートによっては波形描画・再生できない場合があります。

ブラウザ上でもがっつり音声ファイルが使えるものなんだなあと、時代の流れをしみじみ感じました。
今回は使用していませんが、波形のズームや音声処理もできるようです。
いろいろ試していきたいと思います!!

スポンサードリンク

音楽バックグラウンド再生機能、改造しました

長らく「ベータ版」のまま置いておいた音楽バックグラウンド再生機能ですが、改造してボタン画像が出てくるようにしました。

バックグラウンド再生をすると、右下に停止ボタンが現れるようになっています。

20150509_01

予備の停止ボタンもサイドバーの右下に置いてます。

20150509_02

今後の課題として、音楽の再生が終わってもボタン出っぱなしなので、再度再生できるようにするか、自動的に消すようにするか悩み中です。

お楽しみいただければ幸いです!!

スポンサードリンク
1 / 41234

音楽素材お品書き

オンライン作曲アプリ

Web Piano Roll!!

ブログ記事お品書き

スポンサードリンク