{"id":20619729,"url":"https://github.com/twtrubiks/flask-dropzone-wavesurfer","last_synced_at":"2025-04-15T12:01:52.437Z","repository":{"id":84518949,"uuid":"66773101","full_name":"twtrubiks/flask-dropzone-wavesurfer","owner":"twtrubiks","description":"python flask-dropzone-wavesurfer 使用Python Flask 搭配 Dropzone.js 和 WaveSurfer.js  ","archived":false,"fork":false,"pushed_at":"2016-08-28T15:14:07.000Z","size":602,"stargazers_count":11,"open_issues_count":0,"forks_count":3,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-28T19:53:44.050Z","etag":null,"topics":["dropzone","flask","python","tutorial","wavesurfer"],"latest_commit_sha":null,"homepage":"","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/twtrubiks.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-08-28T14:38:22.000Z","updated_at":"2024-11-07T08:35:10.000Z","dependencies_parsed_at":"2023-03-02T04:30:28.898Z","dependency_job_id":null,"html_url":"https://github.com/twtrubiks/flask-dropzone-wavesurfer","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/twtrubiks%2Fflask-dropzone-wavesurfer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/twtrubiks%2Fflask-dropzone-wavesurfer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/twtrubiks%2Fflask-dropzone-wavesurfer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/twtrubiks%2Fflask-dropzone-wavesurfer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/twtrubiks","download_url":"https://codeload.github.com/twtrubiks/flask-dropzone-wavesurfer/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249067779,"owners_count":21207395,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["dropzone","flask","python","tutorial","wavesurfer"],"created_at":"2024-11-16T12:12:22.991Z","updated_at":"2025-04-15T12:01:52.400Z","avatar_url":"https://github.com/twtrubiks.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# flask-dropzone-wavesurfer\nflask-dropzone-wavesurfer 使用Python Flask 搭配 Dropzone.js 和 WaveSurfer.js \n* [Demo](https://youtu.be/xPxZJBzia1Y)  \n \n使用Python [Flask](http://flask.pocoo.org/) 搭配 [Dropzone.js](http://www.dropzonejs.com/) (可拖曳檔案上傳) 以及 [WaveSurfer.js](https://wavesurfer-js.org/) (播放音樂)的簡單範例程式，希望大家會喜歡:smile:\n\n## 特色\n* 透過 [Dropzone.js](http://www.dropzonejs.com/) (可拖曳檔案上傳) 。\n* 透過 [WaveSurfer.js](https://wavesurfer-js.org/) (播放音樂)。\n* 使用Python [Flask](http://flask.pocoo.org/)，輕鬆、簡單、快速。\n\n## 執行說明\n請先確定電腦有安裝 [Python](https://www.python.org/)\n\n使用下列指令安裝套件\n``` \npip install -r requirements.txt\n```\n\n接著使用下列指令即可運行\n``` \npython flask-dropzonejs.py\n```\n\n如下圖\n\u003cbr\u003e\n![alt tag](http://i.imgur.com/oKK2JMX.jpg)\n\n接著用你的瀏覽器瀏覽 [http://127.0.0.1:5000/](http://127.0.0.1:5000/)\n\n## 執行畫面\n[http://127.0.0.1:5000/](http://127.0.0.1:5000/) 為首頁 ，首頁畫面很簡單\n![alt tag](http://i.imgur.com/lyHdk5g.jpg)\n\u003cbr\u003e\n可拖曳想要上傳的音樂檔(mp3)以及圖片檔(.jpg .png .gif .jpeg)\n\u003cbr\u003e\n![alt tag](http://i.imgur.com/A0ZH1hB.jpg)\n檔案上傳完畢\n\u003cbr\u003e\n![alt tag](http://i.imgur.com/IRwxx1a.jpg)\n接著可以重新整理網頁(F5)，剛剛的資料會顯示在網頁上\n![alt tag](http://i.imgur.com/oXv1ilB.jpg)\n上傳的檔案會被保存在以下路徑\n\u003cb\u003eflask-dropzone-wavesurfer\\static\\uploads \u003c/b\u003e\n\u003cbr\u003e\u003cbr\u003e\n音樂也是可以播放的哦，點播放的小圖示即可。\n\u003cbr\u003e\n![alt tag](http://i.imgur.com/Rg1o0Jr.jpg)\n\n## External JS\n* [Dropzone.js](http://www.dropzonejs.com/) \n* [WaveSurfer.js](https://wavesurfer-js.org/) \n* [Font Awesome](http://fontawesome.io/) \n\n## 執行環境\n* Python 3.5.2\n\n## License\nMIT license\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftwtrubiks%2Fflask-dropzone-wavesurfer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftwtrubiks%2Fflask-dropzone-wavesurfer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftwtrubiks%2Fflask-dropzone-wavesurfer/lists"}