Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

はじめに

ふと、選択したディレクトリ内の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

yui540
とにかく可愛いのがすこ。
https://yui540.graphics
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした