72
64

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Electronでシンプルな音楽プレイヤーを作ってみた

Posted at

はじめに

ふと、選択したディレクトリ内のmp3ファイルを再生する音楽プレイヤーが欲しいなと思ったので作りました。
名前は、「兎亜」です。

toa.png

ウィンドウサイズも小さくして、デスクトップでの作業の邪魔にならないようにしました。

desktop.png

内容

コンポーネントの部分は、Riot使ってます。
なんとなく使ってるので、使い方合ってるのかよくわかんないです。

曲の再生部分は、Web Audio APIを使わず、

demo.js
let sample = new Audio() 
sample.src = 'demo.mp3'

のような感じで普通のAudio使ってます。

動作

Twitterにデモ動画をツイートしているのでそちらを。

ダウンロード

「兎亜」を使いたい場合は、
https://github.com/yuki540net/toa/releases/tag/v0.0.1
で自身のOSにあったものをダウンロードしてください。

Mac/Windows/Linuxに対応しています。

使い方

まず、「兎亜」を起動してください。

ready.png

ディレクトリを選択

検索のアイコンのボタンを押すと、

open_1.png

ディレクトリの選択画面が出るので、mp3ファイルの入ったディレクトリを選択してください。

open_2.png

すると、ディレクトリの音楽が操作可能になります。

再生位置の移動

シークバーを移動させると、再生位置が調整できます。

seek.png

リピート

曲名の左のアイコンを押すと、全曲リピートと一曲リピートに切り替えられます。

repeat.png

曲のスキップ

再生ボタンの左のアイコンを押すと、前の曲に戻ります。

back.png

再生ボタンの右のアイコンを押すと、次の曲に進みます。

forward.png

曲の選択

リストのようなアイコンを押すと、

playlist_1.png

曲の一覧に移動します。
変更したい曲のチェックボックスを押すと、曲を変更することができます。

playlist_2.png

さいごに

ちょこちょこバグりそうなので、空いた時間に修正していきます。
よければ、GitHubのStarください。

GitHub: https://github.com/yuki540net/toa
Twitter: https://twitter.com/eriri_jp

72
64
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
72
64

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?