- カテゴリープログラミングHTML5/jQuery
HTML5とjQueryを使って音声合成のmp3を再生する実験をしました。
今回の作業について
スノボのトリック検出回路を作るための実験として、スマホのセンサーとjQueryを使ってシミュレーションしようとしています。 スマホをスノーボードに見立てて、振ったり走ったりしてトリックを検出するプログラムを作る感じです。
ただ問題があって、スマホを振り回すと画面が見えなくてリアルタイムに出力結果を見ることができないです。 これでは実験が捗らないので、音声でトリック検出を通知するようにしようと考えました。 たとえばスマホを180度回転させたら「180を検出」とか言わせる感じです。
今回はこれを実現させて作業効率化を図るため、トリック検出通知音(音声合成)の作成と、それをHTML5+jQueryで再生する実験を行いました。
トリック検出通知音の作成
音声合成サービスを探していたら、HOYA株式会社の [VOICE TEXT] で簡単にできることがわかりました。 しかもクオリティが高いです。とりあえず以下を作ってみました。
「180を検出」
「360を検出」
「グーフィーで滑走中」
「ジャンプを検出」
「ノーリーを検出」
「オーリーを検出」
「レギュラーで滑走中」
「停止」
jQueryで再生させる
続いて合成した音声をHTML5+jQueryで再生させます。
jQueryを使う準備
jQueryを使うためには、HTMLのHEAD部分に以下の記述をし、jQueryを読み込むようにしておきます。 jQueryのバージョンは以下に記述しているものでなくてもよいです。お好きなものをどうぞ。
プログラムリスト
続いてmp3を鳴らす実験をします。jQueryの勉強もかねて、1曲再生版と連続再生版を作りました。
再生ボタンと曲を用意
続いて、再生開始ボタン(jQueryをキックするボタン)と、鳴らす音楽を用意します。
実際にやってみた
以下のボタンを押すと再生が始まります。
とりあえず今日はここまで。
アイ