Init project

- add audio player - add visualizer feature - add download feature - add loop feature
Silbad · Jun 9, 2022 · 36c1ed7 · 36c1ed7
1 parent 93e56ed
commit 36c1ed7
Show file tree

Hide file tree

Showing 18 changed files with 2,850 additions and 96 deletions.
diff --git a/.dev/logo.png b/.dev/logo.png
diff --git a/.dev/logo.svg b/.dev/logo.svg
diff --git a/.gitignore b/.gitignore
@@ -4,101 +4,24 @@ logs
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+pnpm-debug.log*
 lerna-debug.log*
 
-# Diagnostic reports (https://nodejs.org/api/report.html)
-report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
-
-# Runtime data
-pids
-*.pid
-*.seed
-*.pid.lock
-
-# Directory for instrumented libs generated by jscoverage/JSCover
-lib-cov
-
-# Coverage directory used by tools like istanbul
-coverage
-*.lcov
-
-# nyc test coverage
-.nyc_output
-
-# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
-.grunt
-
-# Bower dependency directory (https://bower.io/)
-bower_components
-
-# node-waf configuration
-.lock-wscript
-
-# Compiled binary addons (https://nodejs.org/api/addons.html)
-build/Release
-
-# Dependency directories
-node_modules/
-jspm_packages/
-
-# TypeScript v1 declaration files
-typings/
-
-# TypeScript cache
-*.tsbuildinfo
-
-# Optional npm cache directory
-.npm
-
-# Optional eslint cache
-.eslintcache
-
-# Microbundle cache
-.rpt2_cache/
-.rts2_cache_cjs/
-.rts2_cache_es/
-.rts2_cache_umd/
-
-# Optional REPL history
-.node_repl_history
-
-# Output of 'npm pack'
-*.tgz
-
-# Yarn Integrity file
-.yarn-integrity
-
-# dotenv environment variables file
-.env
-.env.test
-
-# parcel-bundler cache (https://parceljs.org/)
-.cache
-
-# Next.js build output
-.next
-
-# Nuxt.js build / generate output
-.nuxt
+node_modules
 dist
-
-# Gatsby files
-.cache/
-# Comment in the public line in if your project uses Gatsby and *not* Next.js
-# https://nextjs.org/blog/next-9-1#public-directory-support
-# public
-
-# vuepress build output
-.vuepress/dist
-
-# Serverless directories
-.serverless/
-
-# FuseBox cache
-.fusebox/
-
-# DynamoDB Local files
-.dynamodb/
-
-# TernJS port file
-.tern-port
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+.yarn
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+*.code-workspace
+*.yarnrc.yml
diff --git a/README.md b/README.md
@@ -1,2 +1,3 @@
 # vue-tailwind-player
-A web audio player with vue3 &amp; tailwind
+
+A web audio player with vue3 &amp; tailwind
diff --git a/index.html b/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vue Tailwind Player | Demo</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>
diff --git a/jsconfig.json b/jsconfig.json
@@ -0,0 +1,10 @@
+{
+    "compilerOptions": {
+        "baseUrl": ".",
+    },
+    "exclude": [
+        "node_modules",
+        "**/node_modules",
+        "dist"
+    ]
+}
diff --git a/package.json b/package.json
@@ -0,0 +1,24 @@
+{
+    "name": "vue-tailwind-player",
+    "private": true,
+    "version": "1.0.0",
+    "scripts": {
+        "dev": "vite",
+        "build": "vite build",
+        "preview": "vite preview"
+    },
+    "dependencies": {
+        "vue": "^3.2.37"
+    },
+    "devDependencies": {
+        "@tailwindcss/aspect-ratio": "^0.4.0",
+        "@tailwindcss/forms": "^0.5.1",
+        "@tailwindcss/line-clamp": "^0.4.0",
+        "@tailwindcss/typography": "^0.5.2",
+        "@vitejs/plugin-vue": "^2.3.1",
+        "autoprefixer": "^10.4.7",
+        "postcss": "^8.4.13",
+        "tailwindcss": "^3.0.24",
+        "vite": "^2.9.7"
+    }
+}
diff --git a/postcss.config.js b/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/public/Les Bernardo - Le Malheur De Sophie.mp3 b/public/Les Bernardo - Le Malheur De Sophie.mp3
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/src/App.vue b/src/App.vue
@@ -0,0 +1,28 @@
+<template>
+    <div class="grid place-items-center h-screen">
+        <div class="w-1/2">
+            <VueTailwindPlayer source="Les Bernardo - Le Malheur De Sophie.mp3" autoplay download visualizer="sinewave" />
+        </div>
+    </div>
+</template>
+
+<script>
+import VueTailwindPlayer from "@/components/VueTailwindPlayer.vue";
+
+export default {
+    name: "vue-tailwind-player-demo",
+    components: {
+        VueTailwindPlayer,
+    },
+    setup() {
+        console.log(
+            "%c %c %c Vue Tailwind Player ★ version " + __APP_VERSION__ + " ",
+            "background: #35495e",
+            "background: #42b883",
+            "background: #fff"
+        );
+        return {
+        };
+    },
+};
+</script>
diff --git a/src/assets/logo.png b/src/assets/logo.png