NFC 音乐墙 (不限手机)[web 接口服务实现-折腾记录]

功能简介：

手机读取 NFC 标签 (标签内容为：内网 url)，点击 url 直接播放 本地音乐【勾选默认打开方式可以实现 “一触即放“ 的效果】

功能演示地址：NFC 音乐墙 (不限手机)[web 接口服务实现-折腾成果演示]_哔哩哔哩_bilibili

源码地址：NFC音乐墙: Java web 实现接口播放本地音乐

目录

一、具体背景

二、技术分析

三、代码实现

四、个人电脑部署流程

---

一、具体背景

前些天刷抖音，刷到了最近很火的 diy 音乐墙：就是将喜欢的音乐专辑打印出来，然后在背面贴上 NFC 标签，最后添加手机的快捷指令，实现一碰专辑照片就能自动播放音乐的功能，如下图：

抖音链接：https://v.douyin.com/r1vQn55/https://v.douyin.com/r1vQn55/

二、技术分析

看完这个小视频我也非常想弄一面属于自己的音乐墙，毕竟生活需要点仪式感嘛，所以我就认真的看了几遍这个视频，打算自己也跟着弄一下。但在研究具体的操作过程中，发现了几点自己和视频博主使用需求不太一样的地方：

① 我用的是小米civi（不是苹果，也没有快捷指令）

② 视频中音乐是存储在手机中的，换了手机就用不了了

【先声明一下哈，此博文为个人折腾记录，就是发现了好玩的东西，然后用自己的方式来捣弄了一下，满足一下个人好奇心，顺便记录一下而已，完全没有任何冒犯的意思。如果您喜欢折腾的话，欢迎来评论区交流。还有就是我个人技术一般般，大哥们要喷的话请轻点喷。最后最重要的一点是，如果您不爱折腾的话，直接点上面的抖音链接，看看人家的效果就行，就不建议往下看了】

针对我的个人需求，我查了一下资料，也在抖音里找了其它的实现方式。发现了也有不限手机的实现方法：就是使用网易云(xxx.126.net/music.163.com)/酷狗(t4.kugou.com)等平台的音乐分享链接，在手机 nfc 读取到链接后，使用浏览器打开链接，再点击播放音乐，来实现效果。【这个方案大家也可以试一下，毕竟我下面记录的方法是真的很复杂】

上面的实现方式其实已经几乎满足需求了，但我还想播放本地的音乐，而且抖音上也有播放本地音乐的需求，所以都已经折腾了，干脆折腾到底吧。废话了这么多，终于讲到了我的实现方式：写一个服务(程序)，提供播放音乐的接口，nfc 读取完标签后，跳转直接播放音乐。

和上面音乐平台分析链接的区别：

① 点击此链接直接就会播放音乐，无需跳转后再点击播放按键才开始播放音乐

② 播放的是本地音乐，即存储在电脑里的音乐，操作灵活性大(没有音乐平台链接有会员权限问题)

看一下效果：（上面有视频链接）

触碰直接跳转，直接播放音乐，同时显示：playing music：xxx

显示正在播放的音乐  

后台显示播放音乐接口被调用，且播放的音乐为：xxx

三、代码实现

我的思路是：提供一个播放音乐的接口，接口参数为要播放歌曲的名字（例如：http://localhost:8080/play?name=句号-邓紫棋），只要打开此接口 url，后台服务就会去找本地的音乐文件，然后使用播放音乐的对象播放，流程如图：

 技术架构：Spring Boot + Maven

1. Controller 层

@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 层

@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();
    }
}

核心的服务在这一部分，这里有三个问题：

① 怎么用 Java 播放 MP3 音乐？

参考：Java 播放MP3_深色風信子的博客-CSDN博客_java播放音频文件

使用 Google 的 mp3spi

② 怎么保证只有一个音乐在播放，即怎么能实现切歌的功能？

单独定义了一个实例对象类，每次调用 playMusic 和 stopMusic 方法时都只调用同一个对象

serivce 层

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();
}

实例对象 PlayerInstance

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);
        }
    }
}

③ 怎么在播放音乐的同时，立刻返回信息给用户？

因为播放音乐是耗时的操作，所以如果不处理，请求就会超时。即还在播放音乐，但页面显示访问超时。

解决方案：异步。具体实现是：将播放音乐的 service 方法设置成异步执行，controller 层在调用播放音乐的方法后，能立刻返回消息。

参考：SpringBoot 如何实现异步编程_榔娃的博客-CSDN博客_springboot 异步

在 playMusic( ) 方法添加注解 @Async

@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();
    }
}

完整代码链接：NFC音乐墙: Java web 实现接口播放本地音乐

四、个人电脑部署流程

这一部分是为想折腾的小伙伴准备的，但整个过程比较麻烦，安装 jdk 也稍微有点风险，建议完全不懂电脑环境配置的小伙伴就别折腾了，现在离开还来得及。然后本文只是我自己捣弄的记录，代码也比较简单（就是说 bug 比较多），所以非常不建议小白尝试，多刷会抖音不更香吗。

前提条件：

① 电脑、手机连着同一个 WiFi；

② 电脑需要有 jdk8 环境

（安装教程：win10中jdk安装详细安装过程：win10中jdk安装详细安装过程_默默爬行的虫虫的博客-CSDN博客_win10安装jdk；win10安装JDK8：win10安装JDK8 - 哔哩哔哩）

具体部署流程：

1、先确认 jdk8 环境没有问题。

win + R 键 --> 输入 ： cmd 打开命令行窗口

输入指令 java -version，正常会显示如下 ：

2、下载我打包好的 jar 包 （地址：package/music-play-0.0.1.jar · 欲伯先煜仔/NFC音乐墙 - Gitee.com），并放到一个指定的路径下。例如我放到 C盘 的 test 文件夹下：

3、新建一个存放音乐的文件夹，位置为：C:\music （这个位置是固定的，因为是程序里写的）

如果用我打包好的 jar 包，存放音乐的文件夹的路径必须是 C:\music ！！！

4、写一个.bat 文件，目的是可以双击运行 Java 程序

效果：

步骤：

① 新建一个文本文档

② 打开文本文档并复制如下内容（如果下载的 jar 包，存放的路径和我一样，可以直接复制，不一样的将下面的路径改成你自己的路径就行）

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

③ 修改文本文档名字和后缀：playMusic.bat

5、查看并记住电脑的 IP 地址

win + R 键 --> 输入 ： cmd 打开命令行窗口

输入指令 ipconfig

 

可以看到当前我电脑的 IP 为 192.168.31.63 （这个 IP 是家里路由器分配的）

6、双击上面第四步写好的 .bat 文件，疯狂右击一下（右键以管理员权限运行）程序才能正常运行，正常运行如下图：

7、播放音乐的接口

http://192.168.31.63:8080/play?name=邓紫棋-句号

192.168.31.63 -> ip 地址为上面查的电脑的IP地址

邓紫棋-句号 -> 歌名，为上面存在 C:\music 路径下的歌名

8、停止播放音乐的接口（或者直接关掉上面的黑框，直接关掉程序）

http://192.168.31.63:8080/stop

9、把网址复制到浏览器并访问，显示 playing music：xxx ,并开始播放音乐，说明服务部署成功

10、最后一步就是将上面的地址（例:http://192.168.31.63:8080/play?name=邓紫棋-句号）写进nfc 标签

11、标签写完之后，就可以使用连着同一个WiFi的带nfc的手机去：碰图听音了。

收藏一个在线转 gif 的网站：Convertio — 文件转换器