配信オーバーレイ関係

【波形オーバーレイ】オーディビジュアライザー「ハモグラフ」の使い方

#17LIVE #PR

雑談なら17LIVE

17LIVEのアプリのDL先はこちら

筆者もここで活動しているよ!

掲載期間 2022年3月22日(火)~2022年4月30日(土)

みなさんおはこんばんちは(@ReinyaNchannel)です

今回紹介するのは「Hamograph(ハモグラフ)」の使い方です

前回紹介している記事「【OBSプラグイン】BGMや音に反応するオーバーレイ「AudioVisualizer」を紹介!配信画面をオシャレに」ではOBS専用のプラグインで、OBSでしか使えません

8,915view
【OBSプラグイン】BGMや音に反応するオーバーレイ「AudioVisualizer」を紹介!配信画面をオシャレに

今回紹介するのは有志で開発している方から出している配信画面(オーバーレイ)に可視化し「BGM・音楽・音」に反応する「Au ...

続きを見る

 

ハモグラフではブラウザソースで使える、音に反応するオーディオビジュアライザーです

OBSのプラグインと違って、ブラウザで解決できるのがメリットです。かなり使い勝手が良いので、配信画面に音の波形を出したい人はこの記事は参考になるかと思います

 

それでは説明していきます

 

この記事はこんな方におすすめ

  • 配信画面に音の波形を出したい
  • オーディオビジュアライザーを使ってみたい

 

 

開発者紹介

まずはじめに、開発者の紹介をしていきます

紹介する上で、以下のリンクを共有します

SNS等

  • Twitter
  • ホームページ

 

 

Twitter

 

Twitterのリンクはこちら

 

 

ホームページ

 

ホームページのリンクはこちら

 

 

ハモグラフの使い方

ハモグラフはOBS推奨と書いてありますが、ブラウザソースを使える配信ソフトであれば使えるかと思います

配信ソフト

有名どころの配信ソフトでは使えます

  • OBS
  • Xsplit

 

ブラウザでオーディオビジュアライザーを使えるのは非常に優位性が高いので、OBSであればプラグインを使いたくない人は優位性が高いブラウザソース

それでは、ハモグラフの使い方を紹介していきます

OBSをメインで説明していきます

 

その前に、ハモグラフのリンクを先に貼っておきます

hamograph
hamograph

hamograph.oshiteku.app

 

ハモグラフで出来ること

  • ブラウザだけで機能
  • 音声デバイスを検知
  • デスクトップ音声の検知
  • URLを共有ができ、コラボ配信にも使える

 

 

オーディオビジュアライザー「ハモグラフ」を使って配信画面に出す

では、さくっと説明していきますね

注意ポイント

ハモグラフを使う場合はGoogleChromeを使うと良いでしょう

 

  • マイクの許可

    • マイクを許可してあげる
    ReinyaN
    筆者の場合はオーディオインターフェースのデバイスを指定しています

    許可をすると有効になります


  • 波形や音の反応の設定をする

    公式からの設定が載っているので引用します


    • バーの色です。CSSの色指定が使えます。
    • マイクゲイン / デスクトップゲイン
      音声入力のゲイン設定です。0で非表示、2で2倍のゲインになります。
    • バーの数
      表示するバーの本数を指定できます。
    • 開始点 / 終了点
      表示領域の半径を1としたときの、バー描画の開始点と終了点が指定できます。開始点 > 終了点とすることで内向きに動く表示を作れます。
    • 最小高さ
      バーの最小高さです。0に設定すると、入力が無のとき表示も無になります。表示領域の半径を1としたときの値です。

    • バーの横幅。表示領域の半径を1としたときの値です。
    • 角の半径
      バーの角を丸くしたいときに。これも表示領域の半径を1としたときの値です。

    引用:ハモグラフ公式

    色のカスタマイズをするにあたって、以下のサイトを参考にすると良い

    WEB色見本 原色大辞典 - HTMLカラーコード
    WEB色見本 原色大辞典 - HTMLカラーコード

    色の名前とカラーコードが一目でわかるWEB色見本

    www.colordic.org


  • URLをブラウザソースにコピペ

    メモ

    配信ソフト側のブラウザソースにURLを貼るだけ

    • Xsplit=「ソースの追加」→「ウェブページ」にリンクを貼る
    • OBS=「ソースの + 」→「ブラウザ」にリンクを貼る

    設定ができたらURLをブラウザソースに貼り付ける


  • カスタムCSSを設定した人はここも見るべし

     カスタムCSS
    .bar {
    filter: drop-shadow(0 0 10px crimson);
    }
    

  • 設定するとこんな感じになります


 

オーバーレイを使っているのは以下の記事で紹介しています。合わせて読んでみてください

25view
【オーバーレイ】春・さくらをモチーフにした配信オーバーレイを紹介

今回紹介する配信オーバーレイは、春(さくら)をモチーフにした配信素材です 今この時期といえば桜ですよね。さくらの時期じゃ ...

続きを見る

 

 

まとめ

OBSのプラグイン以外での、ブラウザで利用できるオーディオビジュアライザーのオーバーレイの紹介でした

ハモグラフを使って配信画面をオシャレに!

 

ではなにかありましたら記事をあげます

 

サイト管理者のプロフィール

AkaMaruServer

ReinyaN

17LIVEを拠点に活動しているストリーマーで活動してる「ReinyaN」です ゲーム配信しながら雑談をしています。 ブログでは配信に関する情報の記事を上げており、参考になる記事がたくさんあると思いますので探してみてください。

関連記事とスポンサーリンク

  • この記事を書いた人
  • 最新記事

ReinyaN

17LIVEを拠点に活動しているストリーマーで活動してる「ReinyaN」です ゲーム配信しながら雑談をしています。 ブログでは配信に関する情報の記事を上げており、参考になる記事がたくさんあると思いますので探してみてください。

-配信オーバーレイ関係
-, , , , , , , ,


Warning: include(): Filename cannot be empty in /home/reinyanch/25reinyan25.net/public_html/wp-content/plugins/st-lazy-load/templates/wp-template.php on line 11

Warning: include(): Failed opening '' for inclusion (include_path='.:/opt/php-7.4.28/data/pear') in /home/reinyanch/25reinyan25.net/public_html/wp-content/plugins/st-lazy-load/templates/wp-template.php on line 11