• Skip to primary navigation
  • Skip to main content
  • Skip to footer

Inspiration life

ひらめきに従い行動する。

  • Contact
  • Author
  • Products

react

Electron + React でサウンドファイルを再生する方法。

Miyanogawa Yuya
ゆうや
2021 12/19 · 20 min read

Electron + React でサウンドファイルを再生する方法。

こんばんは。宮野川です。個人でアプリ開発してます。

現在開発中のToDoアプリで効果音を実装しました。忘備録を書きました。Electron+React+Javascrpt環境でmp3やwavを鳴らす方法です。

開発環境

  • Electron
  • Nextron
  • Javascript
  • React

解決策:: How to play sound files on local file with Electron

  • 音声ファイルはパブリックフォルダに配置する。

メディアファイルを、パブリックフォルダ以外に配置すると、アクセスエラーになります。プログラムで扱う為には、パブリックフォルダに音声ファイルを配置しましょう。

User@pc renderer % tree
.
├── components
│   ├── Config.jsx
│   ├── EndOfDay.jsx
│   ├── HeadBanner.jsx
│   ├── TodayStamp.jsx
│   ├── TodayTodo.jsx
│   └── TodoBox.jsx
├── lib
│   └── theme.js
├── next.config.js
├── pages
│   ├── _app.jsx
│   ├── _document.jsx
│   └── home.jsx
├── public
│   ├── images
│   └── sounds
│       ├── Fast.mp3
│       ├── ink-pen-1.mp3
│       ├── mixkit-typewriter-soft-hit-1366.wav
│       ├── pencil-1.mp3
│       ├── tape-recorder-eject-1.mp3
│       └── writing-signature-2.mp3
└── style
    ├── home.module.css
    ├── todaystamp.module.css
    ├── todobox.module.css
    └── todotday.module.css

* directories, * files

React で音声ファイルを扱い警告が出る場合のFixコード

React でHTML5 Audio API を使うと、警告が出る場合があります。その場合は下記のコードで解決できます。

// audio_player.play() ・・・*1
// Fix Code
let playPromise = audio_player.play()
if (playPromise !== undefined) {
    playPromise.then(_ => {
      // Automatic playback started!
      // Show playing UI.
    })
    .catch(error => {
      // Auto-play was prevented
      // Show paused UI.
    })
}

audio_player の作成方(*1)

let audio_player = new Audio()
audio_player.src = "@path to file" // サウンドファイルのパス
audio_player.volume = 0.2 // 音声ファイルの音量
<audio id="audio_player"/>

Electron でサウンドファイルを扱うときに遭遇するバグ一覧

Uncaught (in promise) DOMException: Failed to load because no supported source was found.

  • 原因:パブリックフォルダ以外にリソースファイルを配置していることが原因。
  • 解決策:音声ファイルはパブリックフォルダに配置する。

Not allowed to load local resource electron

  • 原因:パブリックフォルダ以外にリソースファイルを配置していることが原因。
  • 解決策:音声ファイルはパブリックフォルダに配置する。

Categories: プログラミングTags: electron, Javascript, react

Footer

最近書きました。

  • YouTubeの文字起こしを人間が見やすい形に一発で編集するアプリをつくった。ダウンロードはこちら。クリップボードテキスト整形ツール: AppleScriptで簡単にYouTubeや記事の要約を編集
  • IQは遺伝するのか?双子研究と遺伝子研究から考える
  • 傾向を分析する。平均的なIQは時代とともにどう変化してきたか?
  • IQテストに関する神話を否定する。事実と虚構を区別する
  • IQテストの攻略法:認知のパターンと問題解決の見極め方
  • IQテストの長所と短所を探るIQテストの長所と短所を探る
  • Electron + React でサウンドファイルを再生する方法。
  • 【解決済み】さくらVPS kusanagi9でwordpressのプラグイン更新が出来ない。
  • 【解決】ERROR ITMS-90237: “The product archive package’s signature is invalid. Ensure that it is signed with your “3rd Party Mac Developer Installer” certificate.”
  • オリジナルIQテスト中級編 全16問 測定可能IQ120 ( s.d.15 )

興味と関心のリスト

  • IQテストの答えと解説 (16)
  • IQについて (18)
  • Cambridge Brain Sciences (4)
  • 雑記 (6)
  • プログラミング (6)

より細かい分類

A Real Me (6) Brain Wars (1) Brain Workshop (1) Cambridge Brain Sciences (3) electron (3) Fit Brains (1) Hampshire Tree Task (1) ipc (1) ipcMain (1) ipcRender (1) IQ CERTIFICATE (1) IQTEST (2) IQtest.dk (4) IQについて (1) Javascript (3) kusanagi (1) Lumosity (1) MacAppStore (1) mas (1) MensaIQTest (2) react (1) testiq.dk (1) Transpoter (1) VONVON (4) wordpress (1) Xcode13 (1) さくらVPS (1) プログラミング (1) ヴィーガン (1) 思考 (1) 意識と感情 (1) 感情論 (2) 読書 (1)

このブログの歴史

最近のコメントです。

  • 123 on 激ムズ2018年IQテストの答えと解説 全15問: “問題10 今12個で3個と1個足していって6倍の時 15と1 18と2 …” May 15, 03:49
  • ゆうや on 2020年版 ノルウェーメンサの答えと解説 Exercise 1〜35: “はげ さん、コメントありがとうございます。 Ex23の項目に、Ex33と同じグ…” Apr 13, 03:58
  • + on ケンブリッジ・ブレイン・サイエンス で遊んだ結果: “Grammatical Reasoningとかまだ結構上がりそうに見えます。英語…” Apr 12, 05:29
  • はげ on 2020年版 ノルウェーメンサの答えと解説 Exercise 1〜35: “Ex23の解説は、Ex33と同じグルーピングをしたほうが美しそう。 またE…” Apr 11, 17:27
  • ゆうや on ケンブリッジ・ブレイン・サイエンス で遊んだ結果: “+ さんコメントありがとう。 SPATIAL PLANNINGが144であとは…” Apr 10, 20:04
  • + on ケンブリッジ・ブレイン・サイエンス で遊んだ結果: “今のスコアはどうですか?” Apr 10, 08:02
  • ゆうや on 2020年版 ノルウェーメンサの答えと解説 Exercise 1〜35: “アクションさん、コメントありがとうございます。 間違いだと思われます。この問題…” Apr 2, 16:17

© 2023inspirationlife. All rights reserved.

  • About
  • Products
  • Contact
  • プライバシーポリシー
  • 免責事項