Listening to Music (Music Player)

Edited on In Views: Reading time ≈ 12 mins.

Background

Download, listen to music, personal use app sharing, etc.

December 2023 Update: One-line command to set up the online music player mmplayer using Docker

Open and use mmPlayer Online Music Player

Online Player Preview

Conversion to mp3 after downloading

For more efficient audio downloads: How to download audio and video from YouTube using youtube-dl

1
ffmpeg -i "file1.mp4" "file2.mp3"

Experiment:

There is an interesting project:
https://github.com/injahow/meting-api

1
2
3
4
5
6
7
8
9
API-Demo:

https://api.injahow.cn/meting/?type=url&id=416892104
https://api.injahow.cn/meting/?type=song&id=591321
https://api.injahow.cn/meting/?type=playlist&id=2619366284
APlayer-Demo:

https://injahow.github.io/meting-api/
https://injahow.github.io/meting-api/?id=2904749230

Input the NetEase music ID directly to obtain the MP3 file, ready for direct playback;
https://api.injahow.cn/meting/?type=url&id=30841838
Free song
https://api.injahow.cn/meting/?type=url&id=157101
30 seconds of free play for paid songs

August 2023 Update

For Android phone users, there is still a very good app available: Bodio Music

bodian.kuwo.com - Impressive work, Kuwo! It’s rumored to evade certain music copyrights by using a video format, etc.
Status: Tested and used

Adding Download Function to Listen 1 Chrome Edition Version 2.27.0

Listen 1 is an extremely powerful open-source music player. As the author says, the hassle of switching between different players due to copyright issues can be frustrating. Listen 1 can perfectly solve this problem.
GitHub page github.com/listen1
Download link listen1.github.io/listen1/
The software provides installation versions for multiple platforms, and here we explain the process for Chrome.

Specific Steps

There are two specific modifications to make. The first one is in listen1.html, at line #1906:

Modify

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="title">
    <span
    ng\-if\="currentPlaying.source === 'xiami'" style\="color: orange; font-size: medium"
    >⚠️ </span
    >{{ currentPlaying.title }}
                            </div>

to

<div class="title">
    <span
    ng\-if\="currentPlaying.source === 'xiami'" style\="color: orange; font-size: medium"
    >⚠️ </span
    >{{ currentPlaying.title }} <a id="download\_music" download="" class="title ng-binding" href="" target="\_blank">Download</a>
    </div>

Here, I added opening in a new window and set the original author’s download to an empty value due to security reasons. Thus, cross-domain issues remain unresolved. The downside of this setting is the manual renaming of saved song titles.

The second modification is in js/loweb.js at line #396:

Change

Promise.all(getUrlPromises)
.then(playerFailCallback)
.catch((response) => {
playerSuccessCallback(response);
});

to

Promise.all(getUrlPromises)
.then(playerFailCallback)
.catch((response) => {
button = document.getElementById(‘download_music’);
button.href = sound.url;
playerSuccessCallback(response);
});

Once these two changes are made, the installation is complete.

How to install: Due to security reasons, Chrome prohibits installation from non-Chrome Web Store links. Therefore, download the listen1_chrome_extension-2.27.0.zip file to your local machine, then complete the above two-step process. Open the chrome://extensions/ page, and directly drag the .crx file into the browser to install.

Specific Steps to Generate Chrome .crx

  1. Open the Chrome browser and go to chrome://extensions/
  2. On the top right, enable Developer mode
  3. Click the button in the middle of the three dots: Pack extension
  4. Choose the folder where you unzipped the file (default folder name: listen1_chrome_extension-2.27.0) and make the two aforementioned file modifications in this folder
  5. Click Pack extension, which will generate two files: listen1_chrome_extension-2.27.0.crx and listen1_chrome_extension-2.27.0.pem
  6. Drag the .crx file into the browser (chrome://extensions/) for installation.

Steps to Create the Firefox Plug-in Version

(1) First, download the relevant code from github: https://github.com/listen1/listen1\_chrome\_extension
(2) After downloading and unzipping the folder, delete the manifest.json file and rename manifest_firefox.json to manifest.json
(3) Enter the command line interface (shortcut keys: win+r, Mac: terminal), navigate to the unzipped directory: cd listen1_chrome_extension-2.10.0 , execute zip -r ../listen1.xpi * , and then find the listen1.xpi file in the parent directory.

zip -r ../listen1.xpi *

(4) (Requires Firefox’s development version Firefox Browser Developer Edition, tested in February 2023) Enter about:config in the Firefox address bar and, regardless of the prompts, click OK. Then search for the preference name xpinstall.signatures.required and switch this option to false.

(5) Go to Add-ons > Extensions > Manage Your Extensions > Settings > Install Add-on from file, and select the newly packaged .xpi file (default name: listen1.xpi) to add.

After installation, the downloading function is still under testing and will hopefully be further improved.

After installing this Chrome or Firefox extension, we can use the browser’s debugging tool’s Network tab to view the media files being played (MP3, FLAC, etc.)

Adding Download Function to Listen 1 Chrome Edition Version 2.27.0
Reference document:

Author: ttys000
Link: https://juejin.cn/post/6878428772249370631
Source: Rare Earth Gold
All rights to the article belong to the author. For commercial reprint, please contact the author for permission. For non-commercial reprint, please indicate the source.
Original link: https://blog.csdn.net/weixin\_40562999/article/details/108943445

One-line Command to Set Up the Online Music Player mmplayer using Docker

1
docker run --name mmPlayer --restart always -dit -p 8300:80 yaonew/mmplayer

Trial access: https://c.carlzeng.com:4443/mp3

  1. Open mmPlayer Online Music Player
  2. Click the “Search” button
  3. Input the music name or artist you want to search for
  4. Hover over the search results, where a play button will appear. Click to play, or download

Source: https://hub.docker.com/r/yaonew/mmplayer

Configuration [Optional]

1
docker run --name mmPlayer --restart always -dit -p 8300:80 -v ./index.html:/app/dist/index.html -v ./prompt.html:/app/dist/prompt.html yaonew/mmplayer

Switch to docker-compose

1
2
3
4
5
6
7
8
9
10
11
12
13
14
version: "3"
services:
    mmplayer:
        container_name: mmPlayer
        restart: always
        stdin_open: true
        tty: true
        ports:
            - 8300:80
        volumes:
            - ./index.html:/app/dist/index.html
            - ./prompt.html:/app/dist/prompt.html
            - ./favicon.ico:/app/dist/favicon.ico
        image: yaonew/mmplayer

After starting docker-compose, initially, the local port 8300 cannot be accessed.

docker stop mmPlayer

docker rm mmPlayer

Then try a few times again, and it should work :-)

Open firewall port, and map the homepage

TODO Next Step

Integrate into the node.js appsearch

Instead of creating a new docker container, integrate it together, and open the sh script to automatically execute. It’s just too great.

Acknowledgments

NAS-usable music player! Online playback, lyric display, playlist synchronization, this container is too powerful

Regret

This is designed for PC-based music listening. It cannot share music, such as sharing a specific favorite song with friends, or generate a long-lasting link.

Do any of you know of a docker-deployed web version music player similar to the NeteaseCloudMusicApi, which can share a link (with picture and playback functionality)? Leave a comment and let me know if it’s good or not.