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

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

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

スポンサードリンク

音楽バックグラウンド再生機能つけました

ご無沙汰になってしまいました。

前々からやりたいなあと思っていたバックグラウンド再生機能をようやく付けてみました。

「♪バックグラウンド再生」のリンクから音楽再生していただくと、サイト内で画面遷移しても、音楽が流れっぱなしになりますよ(一部対象外の画面があります。)

見た目の処理とか音量調整機能とかなにもしていないので、ひとまずはベータ版です。

Macのfirefox、chrome、Safari、iOSのSafariで動作確認しました。
html5のaudioタグに対応したブラウザなら多分大丈夫と思います。

流れっぱなしにして遊んでみてください!

スポンサードリンク

ブラウザがシンセに!Web MIDI APIにチャレンジ

ブラウザ上からMIDI機器を操作できる「Web MIDI API」。
ブラウザ「Chrome」ではこの機能を使用することができます。
以前からすごーく気になっていた機能なのですが、とうとう試してみることにしました。

★参考文献★
Web MIDI API(原文・英語)
Web MIDI API(日本語訳)

準備:chromeのWeb MIDI APIを有効にする

Web MIDI APIはchrome実装されている機能ではありますが、初期状態では無効化されています。
有効にするためにはchromeを起動して、アドレスバーに下記のおまじないを入力します。

chrome://flags/#enable-web-midi

chromeの設定

すると、chromeの設定画面が現れますので、Web MIDI APIを有効化してchromeを再起動しましょう。

有効後再起動

有効後再起動

Web MIDI APIを使用したアプリ作成

chromeの準備ができたら、普通にjavascriptでコーディングして、chromeでそのページを開きます。
するとまあ不思議、PCに接続しているMIDI機器が認識されますよ♪
試しに作ってみたサンプルがこちら

Web MIDI APIサンプル

Web MIDI APIサンプル

選択したMIDI INからの入力を、選択したMIDI OUTに送りつけるサンプルです。

いろいろな組み合わせで試してみました。

1. IN – iPad(WiFi) | OUT – MOTIF RACK ES(PCに直繋ぎ)
2. IN – iPad(WiFi) | OUT – UM-ONE + MOTIF RACK ES
3. IN – iPad(WiFi) | OUT – UM-ONE + SC-D70
4. IN – iPad(WiFi) | OUT – babyface + KONTAKT5
5. IN – UM-ONE + PCR300 | OUT – UM-ONE + SC-D70

今のところちゃんと音が鳴ったのは1の組み合わせだけでした。
後は、OUTに到達はしている風だけど、うまく受け取れていないのか音は鳴らない状態。

MOTIF RACK ES

MOTIF RACK ES

Web Audio APIを使用すればブラウザから直接音声が鳴らせますし、組み合わせてうまく使えばWebでDAW作成、とかも十分できそうですね。
もう少しいろいろ試してみたいと思います♪

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

音楽素材お品書き


ブログ記事お品書き

スポンサードリンク