NFC music wall (not limited to mobile phones) [web interface service implementation - toss record]

Function introduction:

The mobile phone reads the NFC tag (the content of the tag is: intranet url), click on the url to play local [check the default opening method to achieve the effect of "one-touch and play"]

Function demonstration address: NFC music wall (not limited to mobile phones) [web interface service implementation - tossing results demonstration]_哔哩哔哩_bilibili

Source code address: NFC Music Wall: Java web implementation interface to play local music


Table of contents

1. Specific background

2. Technical analysis

3. Code implementation

4. Personal computer deployment process


1. Specific background

A few days ago, I was using Douyin, and I came to the DIY music wall that is very popular recently: it is to print out the music album I like, and then paste the NFC tag on the back, and finally add the shortcut command of the mobile phone, so that the album photo can be played automatically when you touch it Music function, as shown below:

Douyin link: https://v.douyin.com/r1vQn55/ https://v.douyin.com/r1vQn55/

2. Technical analysis

After watching this short video, I also really want to build my own music wall. After all, life needs a sense of ritual, so I watched this video several times seriously, and plan to do it myself. But in the process of studying the specific operation, I found a few things that I have different needs from video bloggers:

① I use Xiaomi civi (not Apple, and there is no shortcut command)

② The music in the video is stored in the mobile phone, and it cannot be used if the mobile phone is changed

[First of all, let me declare that this blog post is a record of personal tossing. I found something interesting, and then messed with it in my own way to satisfy my curiosity. If you like toss, welcome to the comment area to communicate. Also, my personal skills are so-so, if you want to spray, please spray lightly. The last and most important point is, if you don’t like to toss, just click the Douyin link above to see the effect of others, it is not recommended to read down]

According to my personal needs, I checked the information and found other implementation methods in Douyin. I found that there is also a way to realize unlimited mobile phones: use the music sharing links of Netease Cloud (xxx.126.net/music.163.com)/Kugou (t4.kugou.com) and other platforms, and read them in the mobile phone NFC After linking, use a browser to open the link, and then click to play music to achieve the effect. [You can also try this solution, after all, the method I recorded below is really complicated]

The above implementation method has almost met the requirements, but I still want to play local music, and there is also a demand for local music to be played on Douyin, so I have already tossed about it, let’s just toss it to the end. After so much nonsense, I finally talked about my implementation method: write a service (program) to provide an interface for playing music. After nfc reads the tag, it jumps to play music directly.

The difference from the music platform analysis link above:

① Click this link to play the music directly, no need to jump and then click the play button to start playing the music

② Local music is played, that is, music stored in the computer, with great operational flexibility (there is no membership permission problem if there is no music platform link)

Take a look at the effect: (there is a video link above)

Touch to jump directly, play music directly, and display: playing music: xxx

show music now playing  

The background shows that the interface for playing music is called, and the music played is: xxx

3. Code implementation

My idea is: provide an interface for playing music, the interface parameter is the name of the song to be played (for example: http://localhost:8080/play?name= period-Deng Ziqi), as long as the interface url is opened, the background service will Find the local music file, and then use the music playing object to play it, as shown in the flow chart:

 Technical Architecture: Spring Boot + Maven

  1. Controller layer

@RestController
public class MusicPlayerController {
    private static final Logger log = LoggerFactory.getLogger(MusicPlayerController.class);
    @Autowired
    MusicPlayer musicPlayer;
    @GetMapping("/play")
    public ResponseEntity<String> playMusic(String name) throws Exception {
        log.info("play music : {}", name);
        musicPlayer.playMusic(name);
        return ResponseEntity.ok("playing music :" + name);
    }
    @GetMapping("/stop")
    public ResponseEntity<String> stopPlaying() {
        log.info("stop playing music");
        musicPlayer.stopMusic();
        return ResponseEntity.ok("stop playing music");
    }
}

2. Service layer

@Service
public class MusicPlayerImpl implements MusicPlayer {
    /**
     * 参考:Java 播放MP3
     * https://blog.csdn.net/qq_34814092/article/details/80889813
     *
     * @param musicInfo
     * @throws Exception
     */
    @Async
    @Override
    public void playMusic(String musicInfo) throws Exception {
        File file = new File("C:\\yuyu\\music\\" + musicInfo + ".mp3");
        FileInputStream stream = new FileInputStream(file);
        Player player = PlayerInstance.getPlayerInstance();
        if (player == null) {
            PlayerInstance.setPlayerInstance(stream);
            player = PlayerInstance.getPlayerInstance();
            player.play();
        } else {
            player.close();
            PlayerInstance.setPlayerInstance(stream);
            player = PlayerInstance.getPlayerInstance();
            player.play();
        }
    }
    @Override
    public void stopMusic() {
        Player player = PlayerInstance.getPlayerInstance();
        player.close();
    }
}

The core service is in this part, here are three questions:

① How to play MP3 music with Java?

Reference: Java plays MP3_Dark hyacinth's blog-CSDN blog_java plays audio files

Using Google's mp3spi

② How to ensure that only one music is playing, that is, how can the function of cutting songs be realized?

An instance object class is defined separately, and only the same object is called every time the playMusic and stopMusic methods are called

serivce layer

Player player = PlayerInstance.getPlayerInstance();
if (player == null) {
    PlayerInstance.setPlayerInstance(stream);
    player = PlayerInstance.getPlayerInstance();
    player.play();
} else {
    player.close();
    PlayerInstance.setPlayerInstance(stream);
    player = PlayerInstance.getPlayerInstance();
    player.play();
}

instance objectPlayerInstance

public class PlayerInstance {
    private static final Logger log = LoggerFactory.getLogger(PlayerInstance.class);
    public static Player player;
    public static Player getPlayerInstance() {
        return player;
    }
    public static void setPlayerInstance(FileInputStream stream) {
        try {
            player = new Player(stream);
        } catch (JavaLayerException e) {
            log.error("set player instance error", e);
        }
    }
}

③ How to return information to the user immediately while playing music?

Because playing music is a time-consuming operation, the request will timeout if it is not processed. That is, the music is still playing, but the page shows that the access timed out.

Solution: asynchronous. The specific implementation is: set the service method of playing music to be executed asynchronously, and the controller layer can return the message immediately after calling the method of playing music.

Reference: How SpringBoot implements asynchronous programming

Add the annotation @Async to the playMusic( ) method

@Async
@Override
public void playMusic(String musicInfo) throws Exception {
    File file = new File("C:\\yuyu\\music\\" + musicInfo + ".mp3");
    FileInputStream stream = new FileInputStream(file);
    Player player = PlayerInstance.getPlayerInstance();
    if (player == null) {
        PlayerInstance.setPlayerInstance(stream);
        player = PlayerInstance.getPlayerInstance();
        player.play();
    } else {
        player.close();
        PlayerInstance.setPlayerInstance(stream);
        player = PlayerInstance.getPlayerInstance();
        player.play();
    }
}

Full code link: NFC Music Wall: Java web implementation interface to play local music

4. Personal computer deployment process

This part is for those who want to make a fuss, but the whole process is cumbersome, and installing jdk is a bit risky. It is recommended that friends who do not understand computer environment configuration at all should not make troubles, and it is too late to leave now. Then this article is just a record of my own tampering, and the code is relatively simple (that is to say, there are more bugs), so it is not recommended for Xiaobai to try it. Wouldn’t the vibrato be more fragrant if you use more.

prerequisites:

① The computer and mobile phone are connected to the same WiFi;

② The computer needs jdk8 environment

(Installation tutorial: detailed installation process of jdk in win10: detailed installation process of jdk in win10_silently crawling insect blog-CSDN blog_win10 install jdk ; win10 install JDK8: win10 install JDK8 - 哔哩哔哩)

Specific deployment process:

1. First confirm that there is no problem with the jdk8 environment.

win + R key --> input: cmd to open the command line window

Enter the command java -version, normally it will be displayed as follows:

2. Download the jar package I packaged (address: package/music-play-0.0.1.jar · Yu Boxian Yuzai/NFC Music Wall-Gitee.com ), and put it in a specified path. For example, I put it in the test folder of the C drive:

3. Create a new folder for storing music, the location is: C:\music (this location is fixed, because it is written in the program)

If you use the jar package I packed, the path of the music folder must be C:\music! ! !

4. Write a .bat file, the purpose is to double-click to run the Java program

Effect:

step:

① Create a new text document

② Open the text file and copy the following content (if the downloaded jar package is stored in the same path as mine, you can copy it directly, if it is different, just change the path below to your own path)

cd C:\test
java -jar music-play-0.0.1.jar

③ Modify the name and suffix of the text file: playMusic.bat

5. View and remember the IP address of the computer

win + R key --> input: cmd to open the command line window

Enter the command ipconfig

 

You can see that the current IP of my computer is 192.168.31.63 (this IP is assigned by the router at home)

6. Double-click the .bat file written in the fourth step above, and right-click frantically (right-click to run with administrator privileges), the program can run normally. The normal operation is as follows:

7. Interface for playing music

http://192.168.31.63:8080/play?name=Deng Ziqi-full stop

192.168.31.63 -> ip address is the IP address of the computer checked above

Deng Ziqi-period->song title, which is the title of the song stored in the C:\music path above

8. Stop the interface of playing music (or directly close the black box above, and directly close the program)

http://192.168.31.63:8080/stop

9. Copy the URL to the browser and visit it, display playing music: xxx, and start playing music, indicating that the service deployment is successful

10. The last step is to write the above address (for example: http://192.168.31.63:8080/play?name=Deng Ziqi-period) into the nfc tag

11. After writing the label, you can use the mobile phone with nfc connected to the same WiFi to: touch the picture and listen to the sound.

Bookmark an online gif-to-gif website: Convertio — File Converter

Guess you like

Origin blog.csdn.net/qq_42183414/article/details/127751547