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

Inspiration life

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

  • Contact
  • Author
  • Products

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

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

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

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

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

目次 非表示
開発環境
解決策:: How to play sound files on local file with Electron
React で音声ファイルを扱い警告が出る場合のFixコード
audio_player の作成方(*1)
Electron でサウンドファイルを扱うときに遭遇するバグ一覧
Uncaught (in promise) DOMException: Failed to load because no supported source was found.
Not allowed to load local resource electron

開発環境

  • 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

IQテストをKindle出版しました。

IQ140まで測れるIQテスト2023:44,000人以上のユーザーが遊んだ解説付き問題集
『IQ140まで測れるIQテスト2023:44,000人以上のユーザーが遊んだ解説付き問題集』が、
30日間限定で無料で読める方法がこちら

Kindle Unlimitedは、初めて利用する方なら30日間無料お試しができます。
私は以前の無料期間から1年ほど経った後に、再び2ヶ月間無料でお試しできました。以前登録していた方も無料で登録できるかもしれません。

この30日間の無料体験を活用すれば無料で読むことができます。

無料体験は、こちらの公式ホームページからご利用できます。

>>Kindle Unlimitedの無料体験はこちら

※初回30日間無料。以降、月額980円です。

関連記事

  • YouTubeの文字起こしを人間が見やすい形に一発で編集するアプリをつくった。ダウンロードはこちら。クリップボードテキスト整形ツール: AppleScriptで簡単にYouTubeや記事の要約を編集
  • 【解決済み】さくら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.”
  • Promise オブジェクトの中身取得方法。
  • 【2021年】Electron のipcMainでフォルダを開く方法

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

seventeen − 3 =

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
  • プライバシーポリシー
  • 免責事項