<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Sequencer &#8211; Mach3.laBlog</title>
	<atom:link href="https://blog.mach3.jp/tag/sequencer/feed" rel="self" type="application/rss+xml" />
	<link>https://blog.mach3.jp</link>
	<description></description>
	<lastBuildDate>Tue, 11 Nov 2014 04:48:30 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.9</generator>
	<item>
		<title>Web Audio でマトリックスシーケンサーを作ってみた</title>
		<link>https://blog.mach3.jp/2014/11/11/tonegrid-js.html</link>
		
		<dc:creator><![CDATA[mach3]]></dc:creator>
		<pubDate>Tue, 11 Nov 2014 04:48:30 +0000</pubDate>
				<category><![CDATA[Laboratory]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[Matrix]]></category>
		<category><![CDATA[Sequencer]]></category>
		<category><![CDATA[Web Audio API]]></category>
		<guid isPermaLink="false">http://blog.mach3.jp/?p=3893</guid>

					<description><![CDATA[今回のお題は「マトリックスシーケンサー」。 昔Flashで実装された物があったのをふと思い出し、今ならWeb Audio APIで作れそう！と思って作ってみました。 きっと同じ事考えて作って見た人はいるはず。 マトリック [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p>今回のお題は「マトリックスシーケンサー」。 昔Flashで実装された物があったのをふと思い出し、今ならWeb Audio APIで作れそう！と思って作ってみました。 きっと同じ事考えて作って見た人はいるはず。</p>



<figure class="wp-block-image"><img decoding="async" src="https://lh5.googleusercontent.com/-cqC0wmdf4nY/VGGS_z3E4SI/AAAAAAAACmw/4QxHIqi7_sU/s400/2014-1111-00.png" alt="Web Audio でマトリックスシーケンサーを作ってみた"/></figure>



<p></p>



<span id="more-3893"></span>



<h2 class="wp-block-heading">マトリックスシーケンサーとは</h2>



<p>マトリックスシーケンサーとは、整列配置されたボタンをトグルしてループミュージックを奏でる事ができるシーケンサーです。</p>



<figure class="wp-block-image"><img decoding="async" src="https://lh3.googleusercontent.com/-HsfpIr6oSKA/VGGS_1NaMPI/AAAAAAAACmw/OxxpjAfLN6Y/s500/2014-1111-01.png" alt="マトリックスシーケンサー"/></figure>



<p></p>



<p>多くの場合縦軸が音階を、横軸がフレーム（時間）を表し、 左から右にフレームが移動してONにされたボタンに割り当てられた音が鳴る仕組みです。 縦軸の「音」はスケール（調）に則って配置されているので、 相当いい加減にやってもまともな演奏になってしまう所がマトリックスシーケンサーの魅力の一つです。</p>



<p>ハードで知られているのがYAMAHAの「TENORI-ON」ですが現在は生産完了品で、 同製品をiOSアプリにした「<a href="http://appstore.com/app/tnri">TNR-i</a>」/「<a href="http://appstore.com/app/tnre">TNR-e</a>」がリリースされています。 また、その他にも無料・有料含めてiOS向けのマトリックスシーケンサーアプリは多数リリースされています。</p>



<ul class="wp-block-list">
<li><a href="http://jp.yamaha.com/products/musical-instruments/entertainment/tenori-on/">TENORI-ON &#8211; ヤマハ株式会社</a></li>
</ul>



<h2 class="wp-block-heading">作ってみた物: ToneGrid.js</h2>



<figure class="wp-block-image"><a href="http://mach3.github.io/tonegrid.js/"><img decoding="async" src="https://lh6.googleusercontent.com/-R6kPg0IyUAQ/VGGTAGNECmI/AAAAAAAACmw/HpwvHOoGidU/s500/2014-1111-02.png" alt="ToneGrid.js"/></a></figure>



<p></p>



<p>今回は JavaScript + Web Audio API でマトリックスシーケンサーを再現してみました。 勿論 Web Audio API に非対応の環境ではウンともスンとも言いませんので悪しからず。 Chrome/Firefox/Safariあたりで動作確認しています。</p>



<p>「PLAY」ボタンを押すと演奏が開始されるので、配置されているボタンやコントロールを適当にポチポチ押して遊んでみてください。</p>



<ul class="wp-block-list">
<li>デモ: <a href="http://mach3.github.io/tonegrid.js/">ToneGrid Demo</a></li>



<li>リポジトリ: <a href="https://github.com/mach3/tonegrid.js">mach3/tonegrid.js</a></li>
</ul>



<h3 class="wp-block-heading">特徴</h3>



<p>オルゴールのように各音階のオシレータを用意してタイミングをあわせてボリュームを変更する仕組みです。</p>



<ul class="wp-block-list">
<li>スピード・サウンドのイージングを調節できる</li>



<li>スケール（調）を変更できる</li>



<li>音の種類は、Web Audio APIにデフォルトから実装されている Sine/Square/Triangle/Sawtooth から選択可能</li>
</ul>



<h3 class="wp-block-heading">未定な予定</h3>



<ul class="wp-block-list">
<li>SMF形式への変換機能でもつけてみようかとも思っていますが、 使われるかどうかわからないので、あくまでも「気が向いたら」</li>



<li>iOSでも動かなくはないですが、使いやすいように整形してあげたいです。</li>
</ul>



<h2 class="wp-block-heading">まとめ</h2>



<p>Webの技術で楽器が作れる時代です。 楽器をやる人間としては、楽しい事この上無いですね。現場からは以上です。</p>



<p><iframe src="http://rcm-fe.amazon-adsystem.com/e/cm?lt1=_blank&amp;bc1=FFFFFF&amp;IS2=1&amp;nou=1&amp;bg1=FFFFFF&amp;fc1=000000&amp;lc1=0000FF&amp;t=mach3ss-22&amp;o=9&amp;p=8&amp;l=as4&amp;m=amazon&amp;f=ifr&amp;ref=ss_til&amp;asins=B002WLHHBK" style="width:120px;height:240px;float:left;margin-right:1em;" scrolling="no" marginwidth="0" marginheight="0" frameborder="0"></iframe></p>



<p><iframe src="http://rcm-fe.amazon-adsystem.com/e/cm?lt1=_blank&amp;bc1=FFFFFF&amp;IS2=1&amp;nou=1&amp;bg1=FFFFFF&amp;fc1=000000&amp;lc1=0000FF&amp;t=mach3ss-22&amp;o=9&amp;p=8&amp;l=as4&amp;m=amazon&amp;f=ifr&amp;ref=ss_til&amp;asins=B002WLLA18" style="width:120px;height:240px;" scrolling="no" marginwidth="0" marginheight="0" frameborder="0"></iframe></p>
]]></content:encoded>
					
		
		
			</item>
	</channel>
</rss>
