常連

### 前提・実現したいこと

アップローダーに上げたmp3ファイルをWebAudioAPIを利用して再生する機能を実装しています。

下記は動作サンプルです。
[サンプル(CodeSandBox)](https://codesandbox.io/s/crimson-leaf-pfl6q?fontsize=14&hidenavigation=1&theme=dark)
ReactとTypescriptの構成になっています。
動作サンプルのコードは下記ページの2つ目のコードをベースにしています。
[音を操るWeb技術 - Web Audio API入門 - ICS MEDIA](https://ics.media/entry/200427/)

現状は次項のエラーが表示されます。
エラーを解決して、アップローダーにあるmp3を再生したいです。

### 発生している問題・エラーメッセージ

```
Failed to fetch
```

### 該当のソースコード

```tsx
const ctx = new AudioContext();
let sampleSource: any;
let sample: AudioBuffer | null;

const App = () => {
  const setupSample = async () => {
    const res = await fetch("https://dotup.org/uploda/dotup.org2216246.mp3");
    const arrayBuffer = await res.arrayBuffer();
    const audioBuffer = await ctx.decodeAudioData(arrayBuffer);
    return audioBuffer;
  };
  const [ready, setReady] = useState(false);
  useEffect(() => {
    (async () => {
      sample = await setupSample();
      setReady(true);
    })();
  }, []);

  const playSample = (ctx: any, audioBuffer: any) => {
    sampleSource = ctx.createBufferSource();
    sampleSource.buffer = audioBuffer;
    sampleSource.connect(ctx.destination);
    sampleSource.start();
    setPlaying(true);
  };

  const [playing, setPlaying] = useState(false);
  const playAudio = async () => {
    if (playing) return;
    playSample(ctx, sample);
  };
  const pauseAudio = () => {
    sampleSource.stop();
    setPlaying(false);
  };

  return (
    <div className="App">
      <div>
        <button
          onClick={playing ? pauseAudio : playAudio}
          disabled={ready ? false : true}
        >
          {playing ? "pause" : "play"}
        </button>
        <input type="range" />
      </div>
    </div>
  );
};
```

### 調べたこと

エラー文を調べると、ネットワークエラーの問題であると分かりました。
[[フロントエンド] fetchを用いたAjax通信を行う - YoheiM .NET](https://www.yoheim.net/blog.php?q=20170107)
しかし直接fetchするURLを開くとmp3が再生されます。

また、fetchを使ってWebAudioAPIを使って音を鳴らす例を調べましたが、いずれもローカルのファイルを参照している例しか見つけられず、外部サイトから音声ファイルを参照する方法を見つけられませんでした。

Failed to fetchを解決したい。

### 実現したいこと
Web Audio APIを用いてラの音を440Hzとする一般的な音程の周波数の取得、表示がしたいです。

### 現状
Web Audio APIを用いて指定されているmp4形式の音源を流しつつ分析して各周波数成分ごとの値の取得と基本的なグラフ表示はできました。その後、1番大きな値をもつ周波数成分の周波数を表示しようとしたところ想定通りの値が出なくて詰まっている状況です。div要素表示用配列の中に周波数成分の値が入っているかと思い表示させましたが同様の想定より少ない値が表示されました。また、画面に表示させるために周波数成分の値はどこかしらで取ってきているはずだと思い、配列や変数の中身を全て確認しましたが周波数になりそうな値が入っているものはありませんでした。そもそもフーリエ変換でなにをどう変換し値を取得しているのかが分からず、求める音程等に使われる周波数を取得できるのかすら分かっていない状況です。(公式サイトによると周波数は取得できるようですが、それが音程判別に使える周波数かは不明)

### 発生している問題・分からないこと
今の状態だと音声がなっていない状態でも周波数が8Hzほどと表示されてしまいます。
また、ピアノのドレミファソラシドの音階を音源として読み込ませても最大の周波数が9.6Hzほどと正確な値からは程遠い周波数で表示されてしまいます。
特にエラー等は表示されていないです。


### 該当のソースコード

```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="color-scheme" content="dark" />
  </head>
  <body>
    <div class="container"></div>
    <audio src="sound/get.mp3" id="audio" loop controls></audio>
    <div id="frequencyDisplay"></div>
    <script src="./sctipt.js"></script>
  </body>
</html>

```

```JavaScript
/** フーリエ変換を行う分割数。2の乗数でなくてはならない */
const FFT_SIZE = 256;

// HTML要素
const containerElement = document.querySelector(".container");
const audioElement = document.querySelector("#audio");
const frequencyDisplay = document.getElementById("frequencyDisplay");

audioElement.addEventListener("play", init);

// -------------------------------------
// HTML要素の初期化
// -------------------------------------

/** @type {HTMLElement[]} */
const boxes = [];
// div要素の配置
for (let i = 0; i < FFT_SIZE / 2; i++) {
  const div = document.createElement("div");
  div.classList.add("box");
  containerElement.append(div);
  boxes[i] = div;
}

/**
 * サウンドを再生します
 */
function init() {
  // --------------------------------
  // アナライザーの設定を行います
  // --------------------------------
  const context = new AudioContext();

  // アナライザーを生成
  const nodeAnalyser = context.createAnalyser();
  nodeAnalyser.fftSize = FFT_SIZE;
  nodeAnalyser.smoothingTimeConstant = 0.85;
  nodeAnalyser.connect(context.destination);

  // audio 要素と紐付ける
  const nodeSource = context.createMediaElementSource(audioElement);
  nodeSource.connect(nodeAnalyser);

  // --------------------------------
  // 繰り返し処理
  // --------------------------------
  loop();

  /** 描画します */
  function loop() {
    requestAnimationFrame(loop);

    // 波形データを格納する配列の生成
    const freqByteData = new Uint8Array(FFT_SIZE / 2);
    nodeAnalyser.getByteFrequencyData(freqByteData);

    // 高さの更新
    for (let i = 0; i < freqByteData.length; i++) {
      const freqSum = freqByteData[i];
      const scale = freqSum / 256;
      const div = boxes[i];
      div.style.scale = `1 ${scale}`;
    }

    // 基本周波数を取得
    const maxFrequencyIndex = freqByteData.indexOf(Math.max(...freqByteData));
    const baseFrequency = getBaseFrequency(maxFrequencyIndex);

    // 周波数情報を表示
    frequencyDisplay.innerText = `基本周波数: ${baseFrequency}`;
  }

  /**
   * 周波数のインデックスをもとに対応する音名を取得
   * @param {number} index - 周波数のインデックス
   * @returns {string} - 対応する音名
   */
  function getBaseFrequency(index) {
    // ラの音（A4）を440Hzとした場合の音名を取得
    const baseFrequencyA4 = 440;
    const baseFrequencyIndexA4 = 69; // MIDIノート番号でのA4のインデックス
    const frequencyRatio = Math.pow(2, 1 / 12); // 半音の周波数の比率

    const baseFrequency = baseFrequencyA4 * Math.pow(frequencyRatio, index - baseFrequencyIndexA4);
    return baseFrequency.toFixed(2) + " Hz";
  }
}
```

### 試したこと・調べたこと
- [x] teratailやGoogle等で検索した
- [x] ソースコードを自分なりに変更した
- [ ] 知人に聞いた
- [x] その他

##### 上記の詳細・結果
周波数成分の中で一番値の大きなもののことを基本周波数と呼ぶようでその値が一般的な音楽等で扱う音程の周波数のことだと知りました。
そのためその値を取得しようと公式ドキュメントやサイト等を見てみましたがうまくいかないです。

### 補足
特になし

Web Audio APIを用いて音の周波数を出したい

下記スクリプトにて
親ページからモーダルウィンドウを開き、
モーダルウィンドウ内のボタン1押下後、Ajaxで、CGIからデータを受けとり、
受け取ったデータを表示し、
ボタン2押下後、モーダルウィンドウを閉じ、
親ページのテキストボックスにモーダルから受け取ったデータを表示させたいと思っております。
わかりづらくて申し訳ございません。

下記ソースコードではAjaxの動作がうまくいかないようなのですが、
問題の個所をご指摘いただけますでしょうか。 

【親HTML】
```JavaScript
<script>
function showModalWindow() {
	//モーダルダイアログ側へ送るデータを準備
	var company = document.getElementById("INPUT").value;
	var sendArguments = new Array( company );
	
	// モーダルダイアログを開いて、結果のデータを受け取る
	var retString = showModalDialog("pmodal.html", sendArguments,'menubar=no,height=400,width=300',"dialogHeight: 300px; dialogWidth: 400px; center: 1;");
	
	// 受け取った結果を表示
	document.getElementById("OUTPUT").value = retString;
	
}
</script>
<input type="text" id="INPUT" name="INPUT">
<input type="button" value="コード検索" onclick="showModalWindow();" />
<input type="button" id="OUTPUT" name="OUTPUT">
```



【pmodal.html】
```JavaScript
<script type="text/javascript" src="/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">

   // 親ウインドウからデータを受け取る
   function setParams() {
      var parentData = window.dialogArguments;
      document.getElementById( "INPUT" ).value = ( parentData[0] );
   }

	// 親ウインドウへデータを返す
	function retPrefecture() {
	   window.returnValue = document.getElementById("INPUT").value;
	   window.close();
	}
	
	function sendData(){
		var dealer_name = document.getElementById( "DEALER_NAME" ).value;
		alert( dealer_name );
		searchPartnercode( dealer_name ).done( function(result){
			$( #DATA ).html( result )
		}).fail(function(result); {
			$( #DATA ).html( "失敗" )
		});
		
	}
	
	function searchPartnercode( dealer_name ){
	
	var senddata = "dealer_name=" + dealer_name;
	
	return $.ajax({
		type: "POST",
		url: "/cgi-bin/searchCode.cgi",
		data: senddata
	});
	
}

</script>
<body onload="setParams();">
<input type="text" id="INPUT" name="INPUT" >
<input type="button" value="検索" name="SEARCH" id="SEARCH" onClick="sendData()"><br>

<div id="ESPPDATA"></div>
<input type="button" value="選択" onclick="retPrefecture();">
</body>
```

モーダルウィンドウからデータ取得

HTMLで作成したPageで、音声Fileが
自動再生できません。

環境
Windows 10 pro 1903
Google Chromeme 81.0.4044.138

問題となるHTMLの記述
　・
　　<iframe src="StarWars.mp3" allow="autoplay" 
　　　　　style="display:none" id="audio">
　　</iframe>
　・

原因と対処方法を、ご教授ねがいます。

HTML Audio Autoplay で自動再生できません。

### 前提

Pythonで音声の感情認識をしていて、librosaライブラリ
を用いて音声波形をメルスペクトログラムに変換しています。
そのメルスペクトログラムを画像データとして機械学習で画像分類（CNN）しています。

### 実現したいこと
学習データとしてメルスペクトログラム画像を用いるので、メルスペクトログラム画像のカラースケールが下図のような黒紫白になっているものや
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-01-06/516d80f1-15a9-4f4a-9b66-bd80fbaeb0a4.png)

下図のような赤青
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-01-06/7810e1dd-5035-4d23-8922-b7a9b79e963f.png)

これらのどちらかに統一したいです。

### 発生している問題・エラーメッセージ

メルスペクトログラム画像のカラースケールが黒紫白もしくは赤青の２種類のうちどちらかになってしまうこと。

### 該当のソースコード

環境はpython3.9.13でlibrosa0.9.2を使用しています。

```ここに言語名を入力
    y, sr = librosa.load("audio.wav", sr=16000)
    melspec = librosa.feature.melspectrogram(
        y=y, sr=sr, n_fft=2048, win_length=512, hop_length=512)
    melspec = librosa.power_to_db(melspec)
    plt.figure(figsize=(8, 8))
    librosa.display.specshow(melspec, sr=16000)
    plt.savefig("img.png")
    plt.close()

    img = Image.open("img.png")
    img = img.convert("RGB")
    img = img.resize((250, 250))
    data = np.asarray(img)
```

### 試したこと

RGBがBGRになっているのかなと思い、convert("RGB")を試してみましたが変化なしでした。




メルスペクトログラムのカラースケールを統一したい

WebRTCやWebAudioなどを使って、PC内で流れる音声を取得しようとしているのですが、方法が分かりません。。。

具体的に言うと、
Youtubeで流れる音を波形データとして取得し、
その音声の波長データを使って3Dの物体生成する、
というのをやっております。

ちなみに近い完成イメージでいうと、今試しているのは、
WebRTCのnavigator.getUserMediaよりPC内臓のマイクの音を拾ってきて、
その波形データを使って3D表現するというのをやっております。
(Youtubeで流したものをわざわざマイクから拾うという、すごく遠回りな方法です。。。)

```javascript
/*
 * PCのマイクから音をひろってくる
 */

var getUserMedia = navigator.getUserMedia ? 'getUserMedia' :
    navigator.webkitGetUserMedia ? 'webkitGetUserMedia' :
    navigator.mozGetUserMedia ? 'mozGetUserMedia' :
    navigator.msGetUserMedia ? 'msGetUserMedia' :
    undefined;
var astream, micsrc;
var conditions={audio:true, video:false};
const Mic = () => {
    navigator[getUserMedia](
        conditions,
        (stream) => {
            astream=stream;
            micsrc=audioctx.createMediaStreamSource(stream);
            micsrc.connect(audioctx.destination);
            micsrc.connect(analyser);
        },
        (e) => { console.error(e); }
    );
}

//Mic集音開始
Mic();


/*
 * 音声ファイルデータを使用して3Dオブジェクトを生成 
 */

var audioctx = new AudioContext();

var timerId;
var analyser = audioctx.createAnalyser();
analyser.fftSize = 128;
analyser.minDecibels = -100;
analyser.maxDecibels = -30;

var obj;
const DrawGraph = () => {

    var data = new Uint8Array(512);

    scene.remove(obj);

    analyser.getByteFrequencyData(data); //Spectrum Dataで取得

    //Spectrum Dataの値を使って3Dオブジェクト生成
    var geo = new THREE.TorusKnotGeometry( //小数をかけてるのは値を小さくして、3Dオブジェクトのサイズを小さくするため
        Math.round(data[0] * 2.0), //全体的な大きさ
        Math.round(data[1] * 0.3), //チューブの太さ
        Math.round(40), //クネクネの進む方向に対してなん分割するか
        Math.round(8), //チューブ方向に何分割するか
        Math.round(data[2] * 0.3), //なんかクネクネ具合が変わる数値その1
        Math.round(2) //なんかクネクネ具合が変わる数値その2
    );

    var mat = new THREE.MeshBasicMaterial({color: 0xffffff, wireframe:true });
    obj = new THREE.Mesh( geo, mat);
    scene.add(obj);
    
    requestAnimationFrame(DrawGraph);
}
timerId=requestAnimationFrame(DrawGraph);
```

これと同様なことを、PC内で流れる音のみの音声データを拾って、実現したいなと思っているのですが、その方法/調べ方が分からず。。。

丸投げちっくな質問の仕方になってしまい大変恐縮なのですが、ぜひ検索ワードのヒントでもいいので、教えていただけると幸いです...！！

よろしくお願いいたします。

PC内で流れる音源の音声データをJSで取得する方法を教えてください！

Debian Linuxでのroot権限での話です。

音量調整のため
```shell
sudo -u ユーザー名 pacmd set-sink-volume @DEFAULT_SINK@ 0x4CCC
```
を実行すると
```shell
PulseAudio デーモン自身が稼働していないか、又はセッションデーモンとして稼働していません。
```
とエラーが返ってきます。
```shell
sudo -u ユーザー名 pactl list sinks | grep '^[[:space:]]Volume:' | head -n $(( $SINK + 1 )) | tail -n 1 | sed -e 's,.* ([0-9][0-9]*)%.*,\1,'
```


で音量出力（％）を確認すると
```shell
接続失敗: 接続拒否
pa_context_connect() は失敗: 接続拒否
```
とエラーが返ります。
```shell
sudo -u ユーザー名
```
を外してユーザー権限で実行すると無事実行されます。

ジバン行は```#!/bin/sh```です。

root権限で実行できる方法をご教授ください。

root権限でpacmd が実行できません

**WEBブラウザ**で**mp3の音楽ファイル**を再生しているのですが**iPhone**（iOS15.4.1から）のブラウザだけ不具合が起きます、PCやAndroidのブラウザでは大丈夫です。**createObjectURL**で作った**Blob**の**URL**を**Audio**の**src**へセットして再生するのですが**最後の3秒**くらいのところで**ブツ**っと切れてしまいます。終了後に次の曲を再生としたいのですが次の曲へ行けません。
iPhoneはよく**MIMEタイプ**で問題になるのですが今回は何を指定してもうまくいきませんでした。
- audio/mpeg、audio/mp3 … 最後3秒くらいのところでブツっと切れる
- audio/wave … 再生できない曲が多い（当たり前ですが）

blobをBASE64に変換して直接音楽データをsrcへ［data:audio/mpeg;base64,xxxxxxx］というように埋め込むとちゃんと再生されます。但しこの方法だとiPhoneが待機モードの時に処理がストップしてしまう別の問題があり解決に至っていません。
iPhoneのblobメモリ処置がおかしいような感じを受けるのですが解決策もしくは何か情報をお持ちでしたら教えていただけないでしょうか。

```html
 <audio id="audio" controls style="width:100%;" ></audio>
 <form id="form"></form>
 <script>
	xmlhttp = new XMLHttpRequest();

	// フォームデータを取得
	var formdata = new FormData(document.getElementById("form"));
	xmlhttp.open("POST","m.php");
	xmlhttp.responseType = "blob";
	xmlhttp.onload = function() {
		let blob = new Blob([xmlhttp.response],{type:"audio/mpeg"});
		//blob参照URL取得
		let url = URL.createObjectURL(blob);
		document.getElementById("audio").src = url;
	};
	xmlhttp.send(formdata);
  </script>
```

```php（m.php）
<?php
$fp = fopen('Nocturne.mp3','r');
//音楽ファイル読み込み
$data = fread($fp,filesize('Nocturne.mp3'));
fclose($fp);
//ヘッダ情報付与
header('Content-Type:audio/mpeg');
//音楽データ出力
echo $data;
?>
```