web-dev-qa-db-ja.com

音声をサムネイル化する良い方法は何でしょうか?

最大サイズが180×180ピクセルの画像で音声ファイルを表現したい。

私はSoundcloudと同じようなことを考えていましたが、正方形にマッシュするには細断とストレッチが必要です:

Screenshot of Soundcloud's player

何かあるのかな?私は、主にオーディオの視覚化とオーディオのサムネイル化を少し探していましたが、何も役に立たなかったのです。

44
joar

良い質問。 UXに関しては、サムネイルにいくつか必要なものがあります。

  1. サムネイルは簡単に区別できるため、視覚的なハッシュを使用したい場合があります(例 here

  2. 同様のアイテムは同様に見え、異なるアイテムは異なって見えるはずです。理にかなった音のグループ全体で類似していると思われるいくつかのものをエンコードするのが理想的です。ここにいくつかのアイデアとそれらが差別化に役立つかもしれないものがあります:

    • 長さ(例:ポッドキャスト、短いサンプル);これはおそらく対数的に表示されます
    • いくつかの周波数領域表現(デスメタルvsポップvsトーク)
    • ボリュームヒストグラム(手続き的に生成されたサウンドと「有機的な」サウンドの対比)
    • メタデータ(利用可能な場合はファイルタイプ、ストリームレートなど)
  3. 名前付け(これらのファイルに名前があると仮定)はユーザー/コンシューマー次第になると思います。これは、ユーザーがサムネイルを解釈できない場合のフォールバックです。念のため、明確で目立つようにしてください。 (この問題は常にアイコンで発生します。 X神話#13:アイコンが使いやすさを向上させる)を参照してください

  4. サムネイルは覚えやすいものであるのが理想的ですが、サウンドでこれを行う方法はわかりません。

最後に、180x180のサムネイルでこれらすべてを明確にする必要があります。これをうまく行うことは間違いなく非常に挑戦的です。

おそらく次のようなものです(多分これはやり過ぎであるか、CPUに負荷がかかりすぎるでしょう)。

  1. 上記の2の項目の一部またはすべての混合にデフォルトの色相をマップします。これにより、ファイルのグループに類似したカラーファイルが得られます。

  2. 周波数 スペクトログラム 飽和の背景

  3. ボリュームヒストグラムは、バケットの色相を変更することで表すことができます(つまり、180x180表現の四角形、この例では4ですが、もっと使用する必要があります)。

  4. 期間は、ベベルの形で全体を囲む境界に対数的にマッピングできます。 (7分のファイルは6分のファイルとほとんど同じに見えますが、7秒のファイルとは完全に異なります)

これがどのように見えるかの例です:

Example of a sound file thumbnail

お役に立てれば

3
Forthright

短い距離だけ、たとえば200pxにストレッチするように解決された波形を取り、それをリングに巻き付けて、正方形のサムネイル制約の内側に収まるようにします。つまり...波形グラフの長さは... piに多少関係します。

このように、極座標コマンドを使用してフォトショップで作成しました。

Sample waveform on a circle

40
sirtimbly

滑らかにされた波形はあまり役に立ちません。実際には、それは意味がなく、2つの180x180pxの波形を一目で見分けるのは困難です。代わりに、 Identicon のような視覚的ハッシュを検討する場合があります。それでも意味はありませんが、サムネイルは視覚的に区別されます。巧妙なアルゴリズムは、類似のファイル(たとえば、同じアルバムまたは同じアーティストの曲)を視覚的に類似させることさえできます。

Don Parkのブログを少し調べてみると、Frederic Brodbeckの Cinemetrics プロジェクトが浮き彫りになりました。これは、オーディオでの使用に適応できる可能性がある映画向けのビジュアルハッシュです。

25
Justin Piper

「チョッピングとストレッチ」がオーディオデータのセグメントを取得し、それが正方形を満たすようにストレッチすることを意味するのか、それを並べ替えるのかを理解できませんでした。再配置のアプローチは良い考えのように聞こえます。

enter image description here

16

サムネイルは、詳細に立ち入ることなくオブジェクトを識別するためのプレビューとして意図されています。

サムネイルで波形を使用しても、オーディオトラックの識別には役立ちません。

あなたができることは:

  • マウスオーバーで再生される音声サムネイル(例:10秒のプレビュー)を使用する

  • コンテンツの視覚的表現を使用します。データベースまたは事前に識別されタグ付けされたサウンドトラックを使用するか、音声認識を使用します。コンテンツの要素を特定したら、それらの要素を表す小さなサムネイルを1つの大きなサムネイルに含めることができます。
    例えば。歌手、ギター、または電車の写真を含むサムネイル(サウンドトラックが電車が発するノイズのサンプルの場合)。

10
Danny Varod

私が解決した解決策は、 Freesound のスペクトログラム生成コードを使用して、サムネイルの位置に Wadsworth Constant を適用することでした。これにより、オーディオクリップの中心が33%のオーディオクリップのスナップショットが得られます。

例↓
two audio spectrogram thumbnails
実例

プロセスのコードは mediagoblin.media_types.audio.transcoders.py、line#99 にあります。

それらのどれも、私のものも普遍的に正しいわけではないので、私はどの答えも正しいとマークしません。

4
joar

あなたはすでにこれを知っているかもしれません、これは画像の中央または下の曲名で動作するかもしれません。

This is how Apple creates thumbnails for Audio files

4
Pratheep ch

@Forthrightの答えに沿って、ボリュームの強度をグラデーション(カラー/グレースケール)にマッピングし、ヒルベルト曲線に沿ってプロットすることは興味深いと思います。

これは http://corte.si/posts/code/hilbert/portrait/index.html に類似しており、長方形のアイコンを提供して、異なるサウンドパターンの印象を与えます。さまざまなファイルを使用し、任意の長さのオーディオとアイコンのサイズにスケーリングします。

0
Tom

録音の最初の数秒をサムネ​​イルとして使用する動物の音のライブラリがいくつかあります。

https://www.xeno-canto.org/explore?query=turdus+merula&view=

https://www.tierstimmenarchiv.de/RefSys/Preview.php?CurLa=en

https://search.macaulaylibrary.org/catalog?mediaType=a

最後の1つは、Webサイトでレコーディングを再生すると、レコーディング全体の完全なスペクトグラムも表示します。

スペクトグラムには多くの情報が含まれており、訓練を受けたユーザーは、たとえば、スペクトグラムを見るだけで記録内の鳥の種を特定できます(ここでの経験から言っています)。

実際に試してみると、スペクトログラムは非常に直感的に理解しやすいので、もっと多くの人が実験を始めてほしいと思います。

0
ion