Music Competition<\/title>\r\n\r\n <style>\r\n\r\n * {\r\n box-sizing: border-box;\r\n }\r\n\r\n body {\r\n margin: 0;\r\n min-height: 100vh;\r\n background: #000;\r\n color: white;\r\n font-family: Arial, sans-serif;\r\n\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n\r\n padding: 30px;\r\n }\r\n\r\n .container {\r\n width: 800px;\r\n background: #111;\r\n padding: 30px;\r\n border-radius: 20px;\r\n text-align: center;\r\n\r\n box-shadow: 0 0 30px rgba(255,255,255,0.08);\r\n }\r\n\r\n h1 {\r\n margin-top: 0;\r\n margin-bottom: 25px;\r\n }\r\n\r\n\r\n \/* PROFILE *\/\r\n\r\n .profile-area {\r\n margin-bottom: 25px;\r\n }\r\n\r\n .profile-image {\r\n width: 120px;\r\n height: 120px;\r\n\r\n \/* This forces every image into a square *\/\r\n object-fit: fill;\r\n\r\n display: block;\r\n margin: 0 auto;\r\n\r\n border: 3px solid white;\r\n border-radius: 8px;\r\n\r\n background: #222;\r\n }\r\n\r\n .profile-button {\r\n display: inline-block;\r\n\r\n margin-top: 12px;\r\n\r\n color: #aaa;\r\n cursor: pointer;\r\n font-size: 14px;\r\n }\r\n\r\n .profile-button:hover {\r\n color: white;\r\n }\r\n\r\n #profileInput {\r\n display: none;\r\n }\r\n\r\n\r\n \/* TEXT INPUTS *\/\r\n\r\n input[type=\"text\"],\r\n select {\r\n\r\n width: 100%;\r\n\r\n padding: 13px;\r\n\r\n margin-top: 10px;\r\n\r\n border-radius: 10px;\r\n\r\n border: 1px solid #333;\r\n\r\n background: #222;\r\n\r\n color: white;\r\n\r\n font-family: Arial, sans-serif;\r\n\r\n font-size: 15px;\r\n\r\n outline: none;\r\n }\r\n\r\n input[type=\"text\"]:focus,\r\n select:focus {\r\n\r\n border-color: white;\r\n }\r\n\r\n\r\n \/* GENRE *\/\r\n\r\n select {\r\n cursor: pointer;\r\n }\r\n\r\n select option {\r\n background: #222;\r\n color: white;\r\n }\r\n\r\n\r\n \/* FILE *\/\r\n\r\n .file-area {\r\n\r\n margin-top: 18px;\r\n\r\n padding: 20px;\r\n\r\n border: 2px dashed #444;\r\n\r\n border-radius: 12px;\r\n }\r\n\r\n input[type=\"file\"] {\r\n\r\n width: 100%;\r\n\r\n color: white;\r\n\r\n font-family: Arial, sans-serif;\r\n }\r\n\r\n\r\n \/* BUTTON *\/\r\n\r\n button {\r\n\r\n width: 100%;\r\n\r\n padding: 14px;\r\n\r\n margin-top: 18px;\r\n\r\n border: none;\r\n\r\n border-radius: 10px;\r\n\r\n background: white;\r\n\r\n color: black;\r\n\r\n font-family: Arial, sans-serif;\r\n\r\n font-size: 16px;\r\n\r\n font-weight: bold;\r\n\r\n cursor: pointer;\r\n }\r\n\r\n button:hover {\r\n background: #ddd;\r\n }\r\n\r\n\r\n \/* PROGRESS *\/\r\n\r\n #progressArea {\r\n\r\n display: none;\r\n\r\n margin-top: 20px;\r\n }\r\n\r\n .progress-background {\r\n\r\n width: 100%;\r\n\r\n height: 12px;\r\n\r\n background: #333;\r\n\r\n border-radius: 20px;\r\n\r\n overflow: hidden;\r\n }\r\n\r\n #progressBar {\r\n\r\n width: 0%;\r\n\r\n height: 100%;\r\n\r\n background: white;\r\n\r\n transition: width 0.2s;\r\n }\r\n\r\n #progressText {\r\n\r\n margin-top: 8px;\r\n\r\n color: #aaa;\r\n }\r\n\r\n\r\n \/* MESSAGE *\/\r\n\r\n #message {\r\n\r\n margin-top: 15px;\r\n\r\n font-weight: bold;\r\n }\r\n\r\n\r\n \/* PLAYER *\/\r\n\r\n #player {\r\n\r\n display: none;\r\n\r\n margin-top: 25px;\r\n\r\n padding: 20px;\r\n\r\n background: #1b1b1b;\r\n\r\n border-radius: 15px;\r\n }\r\n\r\n #songTitle {\r\n\r\n font-size: 19px;\r\n\r\n font-weight: bold;\r\n\r\n margin-bottom: 7px;\r\n }\r\n\r\n #artistName {\r\n\r\n color: #aaa;\r\n\r\n margin-bottom: 5px;\r\n }\r\n\r\n #genreName {\r\n\r\n color: #777;\r\n\r\n font-size: 14px;\r\n\r\n margin-bottom: 15px;\r\n }\r\n\r\n audio {\r\n\r\n width: 100%;\r\n }\r\n\r\n\r\n \/* COMPETITION BUTTON *\/\r\n\r\n #competitionButton {\r\n\r\n display: none;\r\n\r\n background: #ffcc00;\r\n\r\n color: black;\r\n }\r\n\r\n #competitionButton:hover {\r\n\r\n background: #e6b800;\r\n }\r\n\r\n <\/style>\r\n\r\n<\/head>\r\n\r\n\r\n<body>\r\n\r\n\r\n<div class=\"container\">\r\n\r\n\r\n <h1>\ud83c\udfb5 Music Competition<\/h1>\r\n\r\n\r\n \r\n\r\n <div class=\"profile-area\">\r\n\r\n <img decoding=\"async\"\r\n id=\"profileImage\"\r\n class=\"profile-image\"\r\n src=\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='120' height='120'%3E%3Crect width='120' height='120' fill='%23222222'\/%3E%3Ctext x='60' y='65' text-anchor='middle' fill='white' font-size='14'%3EProfile%3C\/text%3E%3C\/svg%3E\"\r\n alt=\"Profile Picture\"\r\n >\r\n\r\n <label\r\n class=\"profile-button\"\r\n for=\"profileInput\"\r\n >\r\n Choose Profile Picture\r\n <\/label>\r\n\r\n <input\r\n id=\"profileInput\"\r\n type=\"file\"\r\n accept=\"image\/*\"\r\n >\r\n\r\n <\/div>\r\n\r\n\r\n \r\n\r\n <input\r\n id=\"artistName\"\r\n type=\"text\"\r\n placeholder=\"Artist Name\"\r\n >\r\n\r\n\r\n \r\n\r\n <input\r\n id=\"songName\"\r\n type=\"text\"\r\n placeholder=\"Song Name\"\r\n >\r\n\r\n\r\n \r\n\r\n <select id=\"genre\">\r\n\r\n <option value=\"\">\r\n Select Music Genre\r\n <\/option>\r\n\r\n <option>Pop<\/option>\r\n <option>Rock<\/option>\r\n <option>Alternative Rock<\/option>\r\n <option>Hard Rock<\/option>\r\n <option>Heavy Metal<\/option>\r\n <option>Metal<\/option>\r\n <option>Punk<\/option>\r\n <option>Indie<\/option>\r\n\r\n <option>Blues<\/option>\r\n <option>Jazz<\/option>\r\n <option>Classical<\/option>\r\n\r\n <option>Electronic<\/option>\r\n <option>EDM<\/option>\r\n <option>House<\/option>\r\n <option>Techno<\/option>\r\n <option>Trance<\/option>\r\n\r\n <option>Hip Hop<\/option>\r\n <option>Rap<\/option>\r\n <option>R&B<\/option>\r\n <option>Soul<\/option>\r\n <option>Funk<\/option>\r\n\r\n <option>Country<\/option>\r\n <option>Folk<\/option>\r\n <option>Reggae<\/option>\r\n <option>Latin<\/option>\r\n\r\n <option>Lo-fi<\/option>\r\n <option>Ambient<\/option>\r\n <option>Soundtrack<\/option>\r\n\r\n <option>Other<\/option>\r\n\r\n <\/select>\r\n\r\n\r\n \r\n\r\n <div class=\"file-area\">\r\n\r\n <input\r\n id=\"musicFile\"\r\n type=\"file\"\r\n accept=\".mp3,audio\/mpeg\"\r\n >\r\n\r\n <\/div>\r\n\r\n\r\n \r\n\r\n <button id=\"uploadButton\">\r\n Upload Song\r\n <\/button>\r\n\r\n\r\n \r\n\r\n <div id=\"progressArea\">\r\n\r\n <div class=\"progress-background\">\r\n\r\n <div id=\"progressBar\"><\/div>\r\n\r\n <\/div>\r\n\r\n <div id=\"progressText\">\r\n 0%\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n\r\n \r\n\r\n <div id=\"message\"><\/div>\r\n\r\n\r\n \r\n\r\n <div id=\"player\">\r\n\r\n <div id=\"songTitle\"><\/div>\r\n\r\n <div id=\"artistName\"><\/div>\r\n\r\n <div id=\"genreName\"><\/div>\r\n\r\n <audio\r\n id=\"audioPlayer\"\r\n controls\r\n ><\/audio>\r\n\r\n <\/div>\r\n\r\n\r\n \r\n\r\n <button id=\"competitionButton\">\r\n Add to Competition\r\n <\/button>\r\n\r\n\r\n<\/div>\r\n\r\n\r\n<script>\r\n\r\n\r\n\/* =========================\r\n PROFILE PICTURE\r\n========================= *\/\r\n\r\nconst profileInput =\r\n document.getElementById(\"profileInput\");\r\n\r\nconst profileImage =\r\n document.getElementById(\"profileImage\");\r\n\r\n\r\nprofileInput.addEventListener(\"change\", function () {\r\n\r\n const file = this.files[0];\r\n\r\n if (!file) {\r\n return;\r\n }\r\n\r\n\r\n if (!file.type.startsWith(\"image\/\")) {\r\n\r\n alert(\"Please choose an image file.\");\r\n\r\n this.value = \"\";\r\n\r\n return;\r\n }\r\n\r\n\r\n const imageURL =\r\n URL.createObjectURL(file);\r\n\r\n profileImage.src =\r\n imageURL;\r\n\r\n});\r\n\r\n\r\n\r\n\/* =========================\r\n UPLOAD\r\n========================= *\/\r\n\r\nconst uploadButton =\r\n document.getElementById(\"uploadButton\");\r\n\r\n\r\nuploadButton.addEventListener(\"click\", function () {\r\n\r\n\r\n const artist =\r\n document.getElementById(\"artistName\").value.trim();\r\n\r\n\r\n const song =\r\n document.getElementById(\"songName\").value.trim();\r\n\r\n\r\n const genre =\r\n document.getElementById(\"genre\").value;\r\n\r\n\r\n const fileInput =\r\n document.getElementById(\"musicFile\");\r\n\r\n\r\n const message =\r\n document.getElementById(\"message\");\r\n\r\n\r\n const progressArea =\r\n document.getElementById(\"progressArea\");\r\n\r\n\r\n const progressBar =\r\n document.getElementById(\"progressBar\");\r\n\r\n\r\n const progressText =\r\n document.getElementById(\"progressText\");\r\n\r\n\r\n const player =\r\n document.getElementById(\"player\");\r\n\r\n\r\n const competitionButton =\r\n document.getElementById(\"competitionButton\");\r\n\r\n\r\n const audioPlayer =\r\n document.getElementById(\"audioPlayer\");\r\n\r\n\r\n\r\n \/* CHECK ARTIST *\/\r\n\r\n if (artist === \"\") {\r\n\r\n message.style.color = \"red\";\r\n\r\n message.innerHTML =\r\n \"Please enter the artist name.\";\r\n\r\n return;\r\n }\r\n\r\n\r\n \/* CHECK SONG *\/\r\n\r\n if (song === \"\") {\r\n\r\n message.style.color = \"red\";\r\n\r\n message.innerHTML =\r\n \"Please enter the song name.\";\r\n\r\n return;\r\n }\r\n\r\n\r\n \/* CHECK GENRE *\/\r\n\r\n if (genre === \"\") {\r\n\r\n message.style.color = \"red\";\r\n\r\n message.innerHTML =\r\n \"Please select a music genre.\";\r\n\r\n return;\r\n }\r\n\r\n\r\n \/* CHECK FILE *\/\r\n\r\n if (fileInput.files.length === 0) {\r\n\r\n message.style.color = \"red\";\r\n\r\n message.innerHTML =\r\n \"Please select an MP3 file.\";\r\n\r\n return;\r\n }\r\n\r\n\r\n const file =\r\n fileInput.files[0];\r\n\r\n\r\n \/* CHECK MP3 *\/\r\n\r\n if (\r\n file.type !== \"audio\/mpeg\" &&\r\n !file.name.toLowerCase().endsWith(\".mp3\")\r\n ) {\r\n\r\n message.style.color = \"red\";\r\n\r\n message.innerHTML =\r\n \"\u274c Error: Only MP3 files are allowed.\";\r\n\r\n fileInput.value = \"\";\r\n\r\n return;\r\n }\r\n\r\n\r\n\r\n \/* START *\/\r\n\r\n message.innerHTML = \"\";\r\n\r\n progressArea.style.display = \"block\";\r\n\r\n competitionButton.style.display = \"none\";\r\n\r\n player.style.display = \"none\";\r\n\r\n\r\n let percent = 0;\r\n\r\n\r\n progressBar.style.width = \"0%\";\r\n\r\n progressText.innerHTML = \"0%\";\r\n\r\n\r\n const timer = setInterval(function () {\r\n\r\n\r\n percent += 5;\r\n\r\n\r\n if (percent >= 100) {\r\n\r\n percent = 100;\r\n\r\n clearInterval(timer);\r\n\r\n\r\n progressBar.style.width =\r\n \"100%\";\r\n\r\n\r\n progressText.innerHTML =\r\n \"100%\";\r\n\r\n\r\n message.style.color =\r\n \"#00ff88\";\r\n\r\n\r\n message.innerHTML =\r\n \"\u2705 Upload Complete!\";\r\n\r\n\r\n \/* PLAYER *\/\r\n\r\n const musicURL =\r\n URL.createObjectURL(file);\r\n\r\n\r\n audioPlayer.src =\r\n musicURL;\r\n\r\n\r\n document.getElementById(\"songTitle\")\r\n .innerHTML = song;\r\n\r\n\r\n document.getElementById(\"artistName\")\r\n .innerHTML = artist;\r\n\r\n\r\n document.getElementById(\"genreName\")\r\n .innerHTML = genre;\r\n\r\n\r\n player.style.display =\r\n \"block\";\r\n\r\n\r\n \/* COMPETITION BUTTON *\/\r\n\r\n competitionButton.style.display =\r\n \"block\";\r\n\r\n }\r\n\r\n\r\n else {\r\n\r\n progressBar.style.width =\r\n percent + \"%\";\r\n\r\n\r\n progressText.innerHTML =\r\n percent + \"%\";\r\n\r\n }\r\n\r\n\r\n }, 150);\r\n\r\n});\r\n\r\n\r\n\r\n\/* =========================\r\n COMPETITION\r\n========================= *\/\r\n\r\ndocument\r\n .getElementById(\"competitionButton\")\r\n .addEventListener(\"click\", function () {\r\n\r\n const message =\r\n document.getElementById(\"message\");\r\n\r\n\r\n message.style.color =\r\n \"#ffcc00\";\r\n\r\n\r\n message.innerHTML =\r\n \"\ud83c\udfc6 Your song is ready for the competition!\";\r\n\r\n });\r\n\r\n\r\n<\/script>\r\n\r\n\r\n<\/body>\r\n\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Music Competition \ud83c\udfb5 Music Competition Choose Profile Picture Select Music Genre PopRockAlternative RockHard RockHeavy MetalMetalPunkIndieBluesJazzClassicalElectronicEDMHouseTechnoTranceHip HopRapR&BSoulFunkCountryFolkReggaeLatinLo-fiAmbientSoundtrackOther Upload Song 0% Add to Competition<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-495","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/msohani.yclass2.ir\/index.php\/wp-json\/wp\/v2\/posts\/495","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/msohani.yclass2.ir\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/msohani.yclass2.ir\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/msohani.yclass2.ir\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/msohani.yclass2.ir\/index.php\/wp-json\/wp\/v2\/comments?post=495"}],"version-history":[{"count":7,"href":"https:\/\/msohani.yclass2.ir\/index.php\/wp-json\/wp\/v2\/posts\/495\/revisions"}],"predecessor-version":[{"id":513,"href":"https:\/\/msohani.yclass2.ir\/index.php\/wp-json\/wp\/v2\/posts\/495\/revisions\/513"}],"wp:attachment":[{"href":"https:\/\/msohani.yclass2.ir\/index.php\/wp-json\/wp\/v2\/media?parent=495"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/msohani.yclass2.ir\/index.php\/wp-json\/wp\/v2\/categories?post=495"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/msohani.yclass2.ir\/index.php\/wp-json\/wp\/v2\/tags?post=495"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n\r\n \r\n \r\n\r\n Music Competition<\/title>\r\n\r\n <style>\r\n\r\n * {\r\n box-sizing: border-box;\r\n }\r\n\r\n body {\r\n margin: 0;\r\n min-height: 100vh;\r\n background: #000;\r\n color: white;\r\n font-family: Arial, sans-serif;\r\n\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n\r\n padding: 30px;\r\n }\r\n\r\n .container {\r\n width: 800px;\r\n background: #111;\r\n padding: 30px;\r\n border-radius: 20px;\r\n text-align: center;\r\n\r\n box-shadow: 0 0 30px rgba(255,255,255,0.08);\r\n }\r\n\r\n h1 {\r\n margin-top: 0;\r\n margin-bottom: 25px;\r\n }\r\n\r\n\r\n \/* PROFILE *\/\r\n\r\n .profile-area {\r\n margin-bottom: 25px;\r\n }\r\n\r\n .profile-image {\r\n width: 120px;\r\n height: 120px;\r\n\r\n \/* This forces every image into a square *\/\r\n object-fit: fill;\r\n\r\n display: block;\r\n margin: 0 auto;\r\n\r\n border: 3px solid white;\r\n border-radius: 8px;\r\n\r\n background: #222;\r\n }\r\n\r\n .profile-button {\r\n display: inline-block;\r\n\r\n margin-top: 12px;\r\n\r\n color: #aaa;\r\n cursor: pointer;\r\n font-size: 14px;\r\n }\r\n\r\n .profile-button:hover {\r\n color: white;\r\n }\r\n\r\n #profileInput {\r\n display: none;\r\n }\r\n\r\n\r\n \/* TEXT INPUTS *\/\r\n\r\n input[type=\"text\"],\r\n select {\r\n\r\n width: 100%;\r\n\r\n padding: 13px;\r\n\r\n margin-top: 10px;\r\n\r\n border-radius: 10px;\r\n\r\n border: 1px solid #333;\r\n\r\n background: #222;\r\n\r\n color: white;\r\n\r\n font-family: Arial, sans-serif;\r\n\r\n font-size: 15px;\r\n\r\n outline: none;\r\n }\r\n\r\n input[type=\"text\"]:focus,\r\n select:focus {\r\n\r\n border-color: white;\r\n }\r\n\r\n\r\n \/* GENRE *\/\r\n\r\n select {\r\n cursor: pointer;\r\n }\r\n\r\n select option {\r\n background: #222;\r\n color: white;\r\n }\r\n\r\n\r\n \/* FILE *\/\r\n\r\n .file-area {\r\n\r\n margin-top: 18px;\r\n\r\n padding: 20px;\r\n\r\n border: 2px dashed #444;\r\n\r\n border-radius: 12px;\r\n }\r\n\r\n input[type=\"file\"] {\r\n\r\n width: 100%;\r\n\r\n color: white;\r\n\r\n font-family: Arial, sans-serif;\r\n }\r\n\r\n\r\n \/* BUTTON *\/\r\n\r\n button {\r\n\r\n width: 100%;\r\n\r\n padding: 14px;\r\n\r\n margin-top: 18px;\r\n\r\n border: none;\r\n\r\n border-radius: 10px;\r\n\r\n background: white;\r\n\r\n color: black;\r\n\r\n font-family: Arial, sans-serif;\r\n\r\n font-size: 16px;\r\n\r\n font-weight: bold;\r\n\r\n cursor: pointer;\r\n }\r\n\r\n button:hover {\r\n background: #ddd;\r\n }\r\n\r\n\r\n \/* PROGRESS *\/\r\n\r\n #progressArea {\r\n\r\n display: none;\r\n\r\n margin-top: 20px;\r\n }\r\n\r\n .progress-background {\r\n\r\n width: 100%;\r\n\r\n height: 12px;\r\n\r\n background: #333;\r\n\r\n border-radius: 20px;\r\n\r\n overflow: hidden;\r\n }\r\n\r\n #progressBar {\r\n\r\n width: 0%;\r\n\r\n height: 100%;\r\n\r\n background: white;\r\n\r\n transition: width 0.2s;\r\n }\r\n\r\n #progressText {\r\n\r\n margin-top: 8px;\r\n\r\n color: #aaa;\r\n }\r\n\r\n\r\n \/* MESSAGE *\/\r\n\r\n #message {\r\n\r\n margin-top: 15px;\r\n\r\n font-weight: bold;\r\n }\r\n\r\n\r\n \/* PLAYER *\/\r\n\r\n #player {\r\n\r\n display: none;\r\n\r\n margin-top: 25px;\r\n\r\n padding: 20px;\r\n\r\n background: #1b1b1b;\r\n\r\n border-radius: 15px;\r\n }\r\n\r\n #songTitle {\r\n\r\n font-size: 19px;\r\n\r\n font-weight: bold;\r\n\r\n margin-bottom: 7px;\r\n }\r\n\r\n #artistName {\r\n\r\n color: #aaa;\r\n\r\n margin-bottom: 5px;\r\n }\r\n\r\n #genreName {\r\n\r\n color: #777;\r\n\r\n font-size: 14px;\r\n\r\n margin-bottom: 15px;\r\n }\r\n\r\n audio {\r\n\r\n width: 100%;\r\n }\r\n\r\n\r\n \/* COMPETITION BUTTON *\/\r\n\r\n #competitionButton {\r\n\r\n display: none;\r\n\r\n background: #ffcc00;\r\n\r\n color: black;\r\n }\r\n\r\n #competitionButton:hover {\r\n\r\n background: #e6b800;\r\n }\r\n\r\n <\/style>\r\n\r\n<\/head>\r\n\r\n\r\n<body>\r\n\r\n\r\n<div class=\"container\">\r\n\r\n\r\n <h1>\ud83c\udfb5 Music Competition<\/h1>\r\n\r\n\r\n \r\n\r\n <div class=\"profile-area\">\r\n\r\n <img decoding=\"async\"\r\n id=\"profileImage\"\r\n class=\"profile-image\"\r\n src=\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='120' height='120'%3E%3Crect width='120' height='120' fill='%23222222'\/%3E%3Ctext x='60' y='65' text-anchor='middle' fill='white' font-size='14'%3EProfile%3C\/text%3E%3C\/svg%3E\"\r\n alt=\"Profile Picture\"\r\n >\r\n\r\n <label\r\n class=\"profile-button\"\r\n for=\"profileInput\"\r\n >\r\n Choose Profile Picture\r\n <\/label>\r\n\r\n <input\r\n id=\"profileInput\"\r\n type=\"file\"\r\n accept=\"image\/*\"\r\n >\r\n\r\n <\/div>\r\n\r\n\r\n \r\n\r\n <input\r\n id=\"artistName\"\r\n type=\"text\"\r\n placeholder=\"Artist Name\"\r\n >\r\n\r\n\r\n \r\n\r\n <input\r\n id=\"songName\"\r\n type=\"text\"\r\n placeholder=\"Song Name\"\r\n >\r\n\r\n\r\n \r\n\r\n <select id=\"genre\">\r\n\r\n <option value=\"\">\r\n Select Music Genre\r\n <\/option>\r\n\r\n <option>Pop<\/option>\r\n <option>Rock<\/option>\r\n <option>Alternative Rock<\/option>\r\n <option>Hard Rock<\/option>\r\n <option>Heavy Metal<\/option>\r\n <option>Metal<\/option>\r\n <option>Punk<\/option>\r\n <option>Indie<\/option>\r\n\r\n <option>Blues<\/option>\r\n <option>Jazz<\/option>\r\n <option>Classical<\/option>\r\n\r\n <option>Electronic<\/option>\r\n <option>EDM<\/option>\r\n <option>House<\/option>\r\n <option>Techno<\/option>\r\n <option>Trance<\/option>\r\n\r\n <option>Hip Hop<\/option>\r\n <option>Rap<\/option>\r\n <option>R&B<\/option>\r\n <option>Soul<\/option>\r\n <option>Funk<\/option>\r\n\r\n <option>Country<\/option>\r\n <option>Folk<\/option>\r\n <option>Reggae<\/option>\r\n <option>Latin<\/option>\r\n\r\n <option>Lo-fi<\/option>\r\n <option>Ambient<\/option>\r\n <option>Soundtrack<\/option>\r\n\r\n <option>Other<\/option>\r\n\r\n <\/select>\r\n\r\n\r\n \r\n\r\n <div class=\"file-area\">\r\n\r\n <input\r\n id=\"musicFile\"\r\n type=\"file\"\r\n accept=\".mp3,audio\/mpeg\"\r\n >\r\n\r\n <\/div>\r\n\r\n\r\n \r\n\r\n <button id=\"uploadButton\">\r\n Upload Song\r\n <\/button>\r\n\r\n\r\n \r\n\r\n <div id=\"progressArea\">\r\n\r\n <div class=\"progress-background\">\r\n\r\n <div id=\"progressBar\"><\/div>\r\n\r\n <\/div>\r\n\r\n <div id=\"progressText\">\r\n 0%\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n\r\n \r\n\r\n <div id=\"message\"><\/div>\r\n\r\n\r\n \r\n\r\n <div id=\"player\">\r\n\r\n <div id=\"songTitle\"><\/div>\r\n\r\n <div id=\"artistName\"><\/div>\r\n\r\n <div id=\"genreName\"><\/div>\r\n\r\n <audio\r\n id=\"audioPlayer\"\r\n controls\r\n ><\/audio>\r\n\r\n <\/div>\r\n\r\n\r\n \r\n\r\n <button id=\"competitionButton\">\r\n Add to Competition\r\n <\/button>\r\n\r\n\r\n<\/div>\r\n\r\n\r\n<script>\r\n\r\n\r\n\/* =========================\r\n PROFILE PICTURE\r\n========================= *\/\r\n\r\nconst profileInput =\r\n document.getElementById(\"profileInput\");\r\n\r\nconst profileImage =\r\n document.getElementById(\"profileImage\");\r\n\r\n\r\nprofileInput.addEventListener(\"change\", function () {\r\n\r\n const file = this.files[0];\r\n\r\n if (!file) {\r\n return;\r\n }\r\n\r\n\r\n if (!file.type.startsWith(\"image\/\")) {\r\n\r\n alert(\"Please choose an image file.\");\r\n\r\n this.value = \"\";\r\n\r\n return;\r\n }\r\n\r\n\r\n const imageURL =\r\n URL.createObjectURL(file);\r\n\r\n profileImage.src =\r\n imageURL;\r\n\r\n});\r\n\r\n\r\n\r\n\/* =========================\r\n UPLOAD\r\n========================= *\/\r\n\r\nconst uploadButton =\r\n document.getElementById(\"uploadButton\");\r\n\r\n\r\nuploadButton.addEventListener(\"click\", function () {\r\n\r\n\r\n const artist =\r\n document.getElementById(\"artistName\").value.trim();\r\n\r\n\r\n const song =\r\n document.getElementById(\"songName\").value.trim();\r\n\r\n\r\n const genre =\r\n document.getElementById(\"genre\").value;\r\n\r\n\r\n const fileInput =\r\n document.getElementById(\"musicFile\");\r\n\r\n\r\n const message =\r\n document.getElementById(\"message\");\r\n\r\n\r\n const progressArea =\r\n document.getElementById(\"progressArea\");\r\n\r\n\r\n const progressBar =\r\n document.getElementById(\"progressBar\");\r\n\r\n\r\n const progressText =\r\n document.getElementById(\"progressText\");\r\n\r\n\r\n const player =\r\n document.getElementById(\"player\");\r\n\r\n\r\n const competitionButton =\r\n document.getElementById(\"competitionButton\");\r\n\r\n\r\n const audioPlayer =\r\n document.getElementById(\"audioPlayer\");\r\n\r\n\r\n\r\n \/* CHECK ARTIST *\/\r\n\r\n if (artist === \"\") {\r\n\r\n message.style.color = \"red\";\r\n\r\n message.innerHTML =\r\n \"Please enter the artist name.\";\r\n\r\n return;\r\n }\r\n\r\n\r\n \/* CHECK SONG *\/\r\n\r\n if (song === \"\") {\r\n\r\n message.style.color = \"red\";\r\n\r\n message.innerHTML =\r\n \"Please enter the song name.\";\r\n\r\n return;\r\n }\r\n\r\n\r\n \/* CHECK GENRE *\/\r\n\r\n if (genre === \"\") {\r\n\r\n message.style.color = \"red\";\r\n\r\n message.innerHTML =\r\n \"Please select a music genre.\";\r\n\r\n return;\r\n }\r\n\r\n\r\n \/* CHECK FILE *\/\r\n\r\n if (fileInput.files.length === 0) {\r\n\r\n message.style.color = \"red\";\r\n\r\n message.innerHTML =\r\n \"Please select an MP3 file.\";\r\n\r\n return;\r\n }\r\n\r\n\r\n const file =\r\n fileInput.files[0];\r\n\r\n\r\n \/* CHECK MP3 *\/\r\n\r\n if (\r\n file.type !== \"audio\/mpeg\" &&\r\n !file.name.toLowerCase().endsWith(\".mp3\")\r\n ) {\r\n\r\n message.style.color = \"red\";\r\n\r\n message.innerHTML =\r\n \"\u274c Error: Only MP3 files are allowed.\";\r\n\r\n fileInput.value = \"\";\r\n\r\n return;\r\n }\r\n\r\n\r\n\r\n \/* START *\/\r\n\r\n message.innerHTML = \"\";\r\n\r\n progressArea.style.display = \"block\";\r\n\r\n competitionButton.style.display = \"none\";\r\n\r\n player.style.display = \"none\";\r\n\r\n\r\n let percent = 0;\r\n\r\n\r\n progressBar.style.width = \"0%\";\r\n\r\n progressText.innerHTML = \"0%\";\r\n\r\n\r\n const timer = setInterval(function () {\r\n\r\n\r\n percent += 5;\r\n\r\n\r\n if (percent >= 100) {\r\n\r\n percent = 100;\r\n\r\n clearInterval(timer);\r\n\r\n\r\n progressBar.style.width =\r\n \"100%\";\r\n\r\n\r\n progressText.innerHTML =\r\n \"100%\";\r\n\r\n\r\n message.style.color =\r\n \"#00ff88\";\r\n\r\n\r\n message.innerHTML =\r\n \"\u2705 Upload Complete!\";\r\n\r\n\r\n \/* PLAYER *\/\r\n\r\n const musicURL =\r\n URL.createObjectURL(file);\r\n\r\n\r\n audioPlayer.src =\r\n musicURL;\r\n\r\n\r\n document.getElementById(\"songTitle\")\r\n .innerHTML = song;\r\n\r\n\r\n document.getElementById(\"artistName\")\r\n .innerHTML = artist;\r\n\r\n\r\n document.getElementById(\"genreName\")\r\n .innerHTML = genre;\r\n\r\n\r\n player.style.display =\r\n \"block\";\r\n\r\n\r\n \/* COMPETITION BUTTON *\/\r\n\r\n competitionButton.style.display =\r\n \"block\";\r\n\r\n }\r\n\r\n\r\n else {\r\n\r\n progressBar.style.width =\r\n percent + \"%\";\r\n\r\n\r\n progressText.innerHTML =\r\n percent + \"%\";\r\n\r\n }\r\n\r\n\r\n }, 150);\r\n\r\n});\r\n\r\n\r\n\r\n\/* =========================\r\n COMPETITION\r\n========================= *\/\r\n\r\ndocument\r\n .getElementById(\"competitionButton\")\r\n .addEventListener(\"click\", function () {\r\n\r\n const message =\r\n document.getElementById(\"message\");\r\n\r\n\r\n message.style.color =\r\n \"#ffcc00\";\r\n\r\n\r\n message.innerHTML =\r\n \"\ud83c\udfc6 Your song is ready for the competition!\";\r\n\r\n });\r\n\r\n\r\n<\/script>\r\n\r\n\r\n<\/body>\r\n\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Music Competition \ud83c\udfb5 Music Competition Choose Profile Picture Select Music Genre PopRockAlternative RockHard RockHeavy MetalMetalPunkIndieBluesJazzClassicalElectronicEDMHouseTechnoTranceHip HopRapR&BSoulFunkCountryFolkReggaeLatinLo-fiAmbientSoundtrackOther Upload Song 0% Add to Competition<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-495","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/msohani.yclass2.ir\/index.php\/wp-json\/wp\/v2\/posts\/495","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/msohani.yclass2.ir\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/msohani.yclass2.ir\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/msohani.yclass2.ir\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/msohani.yclass2.ir\/index.php\/wp-json\/wp\/v2\/comments?post=495"}],"version-history":[{"count":7,"href":"https:\/\/msohani.yclass2.ir\/index.php\/wp-json\/wp\/v2\/posts\/495\/revisions"}],"predecessor-version":[{"id":513,"href":"https:\/\/msohani.yclass2.ir\/index.php\/wp-json\/wp\/v2\/posts\/495\/revisions\/513"}],"wp:attachment":[{"href":"https:\/\/msohani.yclass2.ir\/index.php\/wp-json\/wp\/v2\/media?parent=495"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/msohani.yclass2.ir\/index.php\/wp-json\/wp\/v2\/categories?post=495"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/msohani.yclass2.ir\/index.php\/wp-json\/wp\/v2\/tags?post=495"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}