戻る

HTML5+jQueryでmp3を連続再生する

Menu

HTML5+jQueryでmp3を連続再生する

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をキックするボタン)と、鳴らす音楽を用意します。

 

実際にやってみた

以下のボタンを押すと再生が始まります。

 

 

 

とりあえず今日はここまで。

このエントリーをはてなブックマークに追加

2016/01/09 15:00

プログラミング HTML5/jQuery

前の記事 記事一覧 次の記事

コメント(1)

  • アイ

    jQueryで再生させる というサンプルですが、
    こちらは、2曲目の実を再生の指定もできますか?

    また厚かましいお話でありますが、
    プルダウンでも選択ができ、停止ボタンも設置は可能でしょうか?
    ご教授して頂きたいと思い、突然のコメントで失礼させて頂きました。

    2019/05/28 15:25:25

  • コメントを投稿する
  • コメントを投稿する場合は以下に注意してください。

    ・記事に関係する内容であること
    ・特別な理由がない限り「全体公開」であること

    これさえ守っていただければどんな内容でも投稿可能です。 皆様の質問やコメントは他の方の問題解決に繋がりますのでご協力ください。

    登録フォーム

Created by freo.

カウンタ