HexfootMusic

KO | EN

gitlite — search

#javascript #python #hacktoberfest #react #ai #typescript #llm #go #golang #android #machine-learning #rust #deep-learning #linux

(★ 14)

歡迎來到六腳音樂大平台，送給你滿滿的大平台。

HexfootMusic Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# HexfootMusic

> 想聽歌?那就來 ♫ 六腳音樂大平台 吧!|

## HexfootMusic 介紹

該專案是採用 KKBOX OPEN API + Vue Cli 3 所製作，僅限前端開發練習 DEMO 用。

## DOME

[https://hsiangfeng.github.io/HexfootMusic/#/](https://hsiangfeng.github.io/HexfootMusic/#/)

## 簡介

此作品為 Vue Cli 前端練習，其主要功能有以下:

- 熱門歌單查看並試聽
- 選擇曲風查詢並試聽
- 排行榜試聽
- 歌曲、歌手、歌單查詢
- 猜歌小遊戲
  - 一般模式
  - 30 秒模式

## 使用技術 & 練習技術

- [KKBOX OPEN API](https://developer.kkbox.com/#/)
- [YouTube Data API](https://developers.google.com/youtube/v3)
- Vue Cli 3
- Vuex
- Vue-Router
- Vue Components
- PWA
- RWD
- Bootstrap4
- jQuery
- JavaScript(ES6等)
- PUG
- SCSS
- CORS
- Webpack
- ESlint(aribnb)
- Adobe XD

## Vue-Plugin or Other-Plugin

- [Vue-cli-plugin-pwa](https://www.npmjs.com/package/@vue/cli-plugin-pwa)
- [Vue-fontawesome](https://fontawesome.com/how-to-use/on-the-web/using-with/vuejs)
- [Vue-axios](https://www.npmjs.com/package/vue-axios)
- [Vue-typed-js](https://github.com/Orlandster/vue-typed-js)
- [Vue-awesome-swiper](https://surmon-china.github.io/vue-awesome-swiper/)
- [Vue-loading-overlay](https://www.npmjs.com/package/vue-loading-overlay)
- [Vue-router](https://router.vuejs.org/zh/)
- [Vue-cli-plugin-pug](https://www.npmjs.com/package/vue-cli-plugin-pug)
- [Vue-radial-progress](https://www.npmjs.com/package/vue-radial-progress)
- [Vue-sweetalert2](https://www.npmjs.com/package/vue-sweetalert2)
- [Vue-countup-v2](https://www.npmjs.com/package/vue-countup-v2)
- [Popper.js](https://popper.js.org/)

## 前端介紹

### 過場動畫

![六腳跳舞](https://i.imgur.com/oF59Qqn.gif)

Logo 製作是使用 Adobe XD 製作，並製作兩張圖合成為 Gif 檔。

### 首頁

![首頁](https://i.imgur.com/xQVwn9B.png)

### 查詢

![查詢](https://i.imgur.com/Yydwh19.png)

### KKBOX 播放介面

![KKBOX 播放介面](https://i.imgur.com/5yr0sJb.png)

### Youtube 播放介面

![Youtube 播放介面](https://i.imgur.com/aGmm2WI.png)

### 風格查詢

![風格查詢](https://i.imgur.com/mxWcYHL.png)

### 小遊戲

小遊戲有分兩種模式

- 一般模式
- 30 秒模式

![小遊戲](https://i.imgur.com/nutjpma.png)

#### 一般模式

![選取風格](https://i.imgur.com/BIfgy3r.png)

![播放歌曲](https://i.imgur.com/bKeoO9K.png)

#### 30 秒模式

![30 秒模式](https://i.imgur.com/vyB9cae.png)

![挑戰中](https://i.imgur.com/fN5CIgC.png)

## Project setup
### development
```
npm install
npm run serve
```
### .env 設定
* [建立 App 並獲得 Client ID 及 Client Secret](https://docs-zhtw.kkbox.codes/#overview--step-2-%E7%8D%B2%E5%8F%96-access-token)
```
修改 .env 的 YOUR_CLIENT_ID 及 YOUR_CLIENT_SECRET
VUE_APP_CLINETID=YOUR_CLIENT_ID
VUE_APP_CLIENTSECRET=YOUR_CLIENT_SECRET
```

## 其他細節
本作品還有支援 PWA，詳情請見作品。

## 聲明

本作品內圖片、內容等，純粹為個人練習前端使用，不做任何商業用途。

HexfootMusic

HexfootMusic Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

HexfootMusic

HexfootMusic Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README