功能簡介：

手機讀取 NFC 標(biāo)簽 (標(biāo)簽內(nèi)容為：內(nèi)網(wǎng) url)，點擊 url 直接播放 本地音樂【勾選默認打開方式可以實現(xiàn) “一觸即放“ 的效果】

功能演示地址：NFC 音樂墻 (不限手機)[web 接口服務(wù)實現(xiàn)-折騰成果演示]_嗶哩嗶哩_bilibili

源碼地址：NFC音樂墻: Java web 實現(xiàn)接口播放本地音樂

目錄

一、具體背景

二、技術(shù)分析

三、代碼實現(xiàn)

四、個人電腦部署流程

一、具體背景

前些天刷抖音，刷到了最近很火的 diy 音樂墻：就是將喜歡的音樂專輯打印出來，然后在背面貼上 NFC 標(biāo)簽，最后添加手機的快捷指令，實現(xiàn)一碰專輯照片就能自動播放音樂的功能，如下圖：

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

二、技術(shù)分析

看完這個小視頻我也非常想弄一面屬于自己的音樂墻，畢竟生活需要點儀式感嘛，所以我就認真的看了幾遍這個視頻，打算自己也跟著弄一下。但在研究具體的操作過程中，發(fā)現(xiàn)了幾點自己和視頻博主使用需求不太一樣的地方：

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

② 視頻中音樂是存儲在手機中的，換了手機就用不了了

【先聲明一下哈，此博文為個人折騰記錄，就是發(fā)現(xiàn)了好玩的東西，然后用自己的方式來搗弄了一下，滿足一下個人好奇心，順便記錄一下而已，完全沒有任何冒犯的意思。如果您喜歡折騰的話，歡迎來評論區(qū)交流。還有就是我個人技術(shù)一般般，大哥們要噴的話請輕點噴。最后最重要的一點是，如果您不愛折騰的話，直接點上面的抖音鏈接，看看人家的效果就行，就不建議往下看了】

針對我的個人需求，我查了一下資料，也在抖音里找了其它的實現(xiàn)方式。發(fā)現(xiàn)了也有不限手機的實現(xiàn)方法：就是使用網(wǎng)易云(xxx.126.net/music.163.com)/酷狗(t4.kugou.com)等平臺的音樂分享鏈接，在手機 nfc 讀取到鏈接后，使用瀏覽器打開鏈接，再點擊播放音樂，來實現(xiàn)效果。【這個方案大家也可以試一下，畢竟我下面記錄的方法是真的很復(fù)雜】

上面的實現(xiàn)方式其實已經(jīng)幾乎滿足需求了，但我還想播放本地的音樂，而且抖音上也有播放本地音樂的需求，所以都已經(jīng)折騰了，干脆折騰到底吧。廢話了這么多，終于講到了我的實現(xiàn)方式：寫一個服務(wù)(程序)，提供播放音樂的接口，nfc 讀取完標(biāo)簽后，跳轉(zhuǎn)直接播放音樂。

和上面音樂平臺分析鏈接的區(qū)別：

① 點擊此鏈接直接就會播放音樂，無需跳轉(zhuǎn)后再點擊播放按鍵才開始播放音樂

② 播放的是本地音樂，即存儲在電腦里的音樂，操作靈活性大(沒有音樂平臺鏈接有會員權(quán)限問題)

看一下效果：（上面有視頻鏈接）

觸碰直接跳轉(zhuǎn)，直接播放音樂，同時顯示：playing music：xxx

顯示正在播放的音樂 ?

后臺顯示播放音樂接口被調(diào)用，且播放的音樂為：xxx

三、代碼實現(xiàn)

我的思路是：提供一個播放音樂的接口，接口參數(shù)為要播放歌曲的名字（例如：http://localhost:8080/play?name=句號-鄧紫棋），只要打開此接口 url，后臺服務(wù)就會去找本地的音樂文件，然后使用播放音樂的對象播放，流程如圖：

?技術(shù)架構(gòu)：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();
 ?  }
}

核心的服務(wù)在這一部分，這里有三個問題：

① 怎么用 Java 播放 MP3 音樂？

參考：Java 播放MP3_深色風(fēng)信子的博客-CSDN博客_java播放音頻文件

使用 Google 的 mp3spi

② 怎么保證只有一個音樂在播放，即怎么能實現(xiàn)切歌的功能？

單獨定義了一個實例對象類，每次調(diào)用 playMusic 和 stopMusic 方法時都只調(diào)用同一個對象

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

③ 怎么在播放音樂的同時，立刻返回信息給用戶？

因為播放音樂是耗時的操作，所以如果不處理，請求就會超時。即還在播放音樂，但頁面顯示訪問超時。

解決方案：異步。具體實現(xiàn)是：將播放音樂的 service 方法設(shè)置成異步執(zhí)行，controller 層在調(diào)用播放音樂的方法后，能立刻返回消息。

參考：SpringBoot 如何實現(xiàn)異步編程_榔娃的博客-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 實現(xiàn)接口播放本地音樂

四、個人電腦部署流程

這一部分是為想折騰的小伙伴準(zhǔn)備的，但整個過程比較麻煩，安裝 jdk 也稍微有點風(fēng)險，建議完全不懂電腦環(huán)境配置的小伙伴就別折騰了，現(xiàn)在離開還來得及。然后本文只是我自己搗弄的記錄，代碼也比較簡單（就是說 bug 比較多），所以非常不建議小白嘗試，多刷會抖音不更香嗎。

前提條件：

① 電腦、手機連著同一個 WiFi；

② 電腦需要有 jdk8 環(huán)境

（安裝教程：win10中jdk安裝詳細安裝過程：win10中jdk安裝詳細安裝過程_默默爬行的蟲蟲的博客-CSDN博客_win10安裝jdk；win10安裝JDK8：win10安裝JDK8 - 嗶哩嗶哩）

具體部署流程：

1、先確認 jdk8 環(huán)境沒有問題。

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 ！?。?/p>

4、寫一個.bat 文件，目的是可以雙擊運行 Java 程序

效果：

步驟：

① 新建一個文本文檔

② 打開文本文檔并復(fù)制如下內(nèi)容（如果下載的 jar 包，存放的路徑和我一樣，可以直接復(fù)制，不一樣的將下面的路徑改成你自己的路徑就行）

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

③ 修改文本文檔名字和后綴：playMusic.bat

5、查看并記住電腦的 IP 地址

win + R 鍵 --> 輸入 ： cmd 打開命令行窗口

輸入指令 ipconfig

?

可以看到當(dāng)前我電腦的 IP 為 192.168.31.63 （這個 IP 是家里路由器分配的）

6、雙擊上面第四步寫好的 .bat 文件，瘋狂右擊一下（右鍵以管理員權(quán)限運行）程序才能正常運行，正常運行如下圖：

7、播放音樂的接口

http://192.168.31.63:8080/play?name=鄧紫棋-句號

192.168.31.63 -> ip 地址為上面查的電腦的IP地址

鄧紫棋-句號 -> 歌名，為上面存在 C:\music 路徑下的歌名

8、停止播放音樂的接口（或者直接關(guān)掉上面的黑框，直接關(guān)掉程序）

http://192.168.31.63:8080/stop

9、把網(wǎng)址復(fù)制到瀏覽器并訪問，顯示 playing music：xxx ,并開始播放音樂，說明服務(wù)部署成功

10、最后一步就是將上面的地址（例:http://192.168.31.63:8080/play?name=鄧紫棋-句號）寫進nfc 標(biāo)簽

11、標(biāo)簽寫完之后，就可以使用連著同一個WiFi的帶nfc的手機去：碰圖聽音了。

收藏一個在線轉(zhuǎn) gif 的網(wǎng)站：Convertio — 文件轉(zhuǎn)換器文章來源地址http://www.zghlxwxcb.cn/news/detail-454588.html

到了這里，關(guān)于NFC 音樂墻 (不限手機)[web 接口服務(wù)實現(xiàn)-折騰記錄]的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！