2021找找不能忘記的母語歌 - 新北多元文化節

Project Intro

關於活動

聽到「母語歌」三個字，腦海響起什麼旋律呢？

是社運街頭上，與夥伴一起揮灑的淚與汗； 是部落中，耆老傳唱的祖靈叮嚀； 還是長輩在午後時光，輕輕哼著的小曲？

「找找，不能忘記的母語歌」是2021新北市多元文化節系列活動。 本年度主題為「音樂」，期待透過線上母語歌地圖與大眾一同蒐集交流彼此的文化，邀請你分享那些刻在心底的時光，一起留下屬於這個時代的母語歌和故事。

一、活動時間 2021/04/01-2021/4/30

二、活動對象 歡迎對分享母語歌及人生故事有興趣之民眾參與

用耳朵找找，生活中你能「聽見」哪些文化呢？

巷子裡發財車發出包子饅頭叫賣聲、電視裡阿嬤喜歡看的歌仔戲、公園裡日本街頭藝人唱歌籌旅費、南洋料理館老闆說著緬甸話...。在這住著400萬人的新北市，有著各種多元的文化，我們每個人身上，也都含有不同文化的成分。

2021年，新北市政府結合聯合國永續發展目標，首次舉辦「多元文化節」，透過一個月的系列活動，讓更多不同文化的聲音被聽見，甚至跨越年齡層，彼此交流、對話與學習。

從「找找」自己文化的母語歌，到「找找」城裡的南洋生活，最後「找找」一群不同文化的人一起在公園裡搭起一個音樂村！你準備好了嗎？一起去找找吧！

母語歌上傳小撇步

步驟一：尋找母語歌

1. 父母或祖父母常唱的歌
2. 你認同為自己母語的歌
3. 家鄉/故鄉的歌
4. 對自己生命有意義的歌曲

步驟二：錄製母語歌，也錄下故事

1. 可以怎麼唱？

個人獨唱、二重唱、多人合唱 / 清唱、伴唱、樂器彈奏 / 只唱一兩句、一段副歌、一整首歌。（請勿直接錄網路上歌曲表演影片的聲音）

2. 可以怎麼錄？

使用手機、錄音筆、電腦等日常器材皆可。

3. 要錄什麼故事？

讓聽眾更了解這首歌的故事，例如這首歌的時代背景、聽到這首歌會讓你想起什麼人事物。

4. 可以錄多久？

建議5分鐘以內，檔案大小10MB。

步驟三：上傳分享母語歌

1. 這些母語歌會做什麼用

我們將共創新北母語聲音地圖，在網站上分享新北的多元文化與多元聲音；也會從中擷取內容，於4/18新北市板橋區四維公園策劃一日展覽。歡迎關注「 2021新北市多元文化節 」。

2. 可以錄很多首歌嗎？

當然可以！同一個帳號可以上傳多首母語歌。

Person In charge

• Plan by 滾出趣創意生活有限公司
• Design by 皮皮
• Website Dev by NorthBei from Metartemis

Relative Link

• 2021新北市多元文化節活動網站
• 2021找找不能忘記的母語歌 - 新北多元文化節
• ETtoday - 新住民多元文化節4月起跑　找找，住在新北的世界聲音

Screenshots/Film

PC(中文)

Demo:

256570812-d64516d3-01be-47d0-9304-82ff7b568ebe.mp4

母語歌地圖:

母語歌上傳管理後台：

Mobile (English)

母語歌地圖:

Here is	some	screenshots

母語歌上傳管理後台：

Here is	some	screenshots

Development Instruction

Environment

Service	Version
Node.js	v18.16.0
npm	v9.5.1
Vue	Vue2 & Vuex

Environment Variables

Rename the .env.local.example to .env.local, and get the env var from Google Map API / Firebase service

Service	Env var
Google Map	VUE_APP_GOOGLE_MAP_API_KEY
Firebase	VUE_APP_FIREBASE_API_KEY
Firebase	VUE_APP_FIREBASE_AUTH_DOMAIN
Firebase	VUE_APP_FIREBASE_PROJECT_ID
Firebase	VUE_APP_FIREBASE_STORAGE_BUCKET
Firebase	VUE_APP_FIREBASE_MESSAGING_SENDER_ID
Firebase	VUE_APP_FIREBASE_APP_ID
Google Tag Manager/ID	VUE_APP_GTM_ID
Google Tag Manager/Env	VUE_APP_GTM_AUTH
Google Tag Manager/Env	VUE_APP_GTM_PREVIEW
Google Tag Manager/Env	VUE_APP_GTM_COOKIES_WIX

Getting Started

Install packages & Run the development server:

npm install
npm run serve

Project setup

Install all packages

npm install

Start Development

Run development web server at http://localhost:8080 to compile and hot-reloads for development

npm run serve

Lint all files

Run lint for all .vue, .js, .json files by eslint

npm run lint

Build Production

Compiles and minifies for production

npm run build

Preview Built Result

Run local static file server for preview built result at http://localhost:8080

npm run preview

Note

Google Map Api Setting

2023/07/27 設定限制Google Map Api只能在這2個網域下載入Google Map

• localhost:8080
• 2021-new-taipei-city-culture-festival.netlify.app

Google Cloud Storage Setting

2023/07/27 限制設定Google Cloud Storage的Object只能在這2個網域下被讀取

• localhost:8080
• 2021-new-taipei-city-culture-festival.netlify.app

CORS Config如下:

{
 "cors": [
   {
     "origin": [
       "http://localhost:8080/", "https://2021-new-taipei-city-culture-festival.netlify.app/"
     ],
     "method": [
       "GET"
     ],
     "maxAgeSeconds": 3600
   }
 ]
}

Reference

• 如何解決Node 17(含)以上，執行Vue2會出現ERR_OSSL_EVP_UNSUPPORTED:
  • how to fix 'ERR_OSSL_EVP_UNSUPPORTED' ERROR in vue?
• 如何更改Google Cloud Storage CORS的設定:
  • Firebase Storage 如何跨網域設定Access-Control-Allow-Origin (CORS)
  • Configuring cross-origin resource sharing (CORS) (recommended)
  • Download files with Cloud Storage on Web