Online Mp3 Tag Editor Html Code Script

:title:Edit MP3 Tags Tag Editor - MehmiTag:/title:<h1>Edit MP3 Tags Tag Editor</h1><div class="tag-editor"><div class="cards-wrapper"><div class="card tag-card"><div class="card-header">Mp3 Tag editor</div><div class="card-body"><form id="uplForm" target="uplFrame" action="https://tagmp3.net/upload.php" method="post" enctype="multipart/form-data"><div class="fn">Select Audio File</div><input type="file" name="files[]" id="file" ></form><form id="tagForm" target="tagFrame" action="https://tagmp3.net/update_tags.php" method="POST" enctype="multipart/form-data"><input type="hidden" name="path" value="/"><input type="hidden" id="filename" value="#filename#"><input type="hidden" name="files[]" value="#filename#"><div class="albumart"><img src="https://thumbs.dreamstime.com/b/no-thumbnail-images-placeholder-forums-blogs-websites-148010338.jpg" width="200" id="art" class="album-art img-fluid" onclick="document.getElementById('artfile').click();"><br><input type="file" accept="image/*" class="form-control" id="artfile" name="albumart[#filename#]" onchange="if (this.files[0]) { const r = new FileReader(); r.onload = e => document.getElementById('art').src = e.target.result; r.readAsDataURL(this.files[0]); }"></div><br><div class="mb-3"><label class="form-label">Title</label><input class="form-control" id="filetitle" name="title[#filename#]" value=""></div><div class="mb-3"><label class="form-label">Artist</label><input class="form-control" name="artist[#filename#]"></div><div class="mb-3"><label class="form-label">Album</label><input class="form-control" name="album[#filename#]"></div><div class="mb-3"><label class="form-label">Year</label><input class="form-control" name="year[#filename#]" value="::date=Y::"></div><div class="mb-3"><label class="form-label">Genre</label><input class="form-control" name="genre[#filename#]"></div><div class="mb-3"><label class="form-label">Composer</label><input class="form-control" name="composer[#filename#]"></div><div class="mb-3"><label class="form-label">Publisher</label><input class="form-control" name="publisher[#filename#]" value="MehmiTech"></div><div class="mb-3"><label class="form-label">Track Number</label><input class="form-control" name="track_number[#filename#]" value="1"></div><div class="mb-3"><label class="form-label">Comment</label><input class="form-control" name="comment[#filename#]" value="Download From :site_url:"></div><div class="mb-3"><label class="form-label">Encoded By</label><input class="form-control" name="encodedby[#filename#]" value="MehmiTech"></div> </form></div></div></div> <div class="center"><button type="submit" class="btn btn-success btn-lg" onclick="submitTag();">Update Tags</button></div></div><div id="loader"></div><iframe name="uplFrame" id="uplFrame" hidden></iframe><iframe name="tagFrame" id="tagFrame" hidden></iframe> <script>const fileInput = document.getElementById("file");const uplForm = document.getElementById("uplForm");const tagForm = document.getElementById("tagForm");const uplFrame = document.getElementById("uplFrame");const tagFrame = document.getElementById("tagFrame");const loader = document.getElementById("loader");const template = tagForm.innerHTML;const loaderIcon = '<div id="loaderOverlay"><div class="loader"></div></div>';fileInput.onchange = () => { const f = fileInput.files[0]; if (!f) return; const filename = f.name.replace(/[^a-zA-Z0-9.-]/g, "_"); var filetitle = f.name; if (filetitle.substr(-4).toLowerCase() === ".mp3") { filetitle = filetitle.substr(0, filetitle.length - 4); } tagForm.innerHTML = template.replace(/#filename#/g, filename); document.getElementById("filetitle").value=filetitle; }; function submitTag() { loader.innerHTML = loaderIcon; uplForm.submit();}uplFrame.onload = function () { tagForm.submit();};tagFrame.onload = function () { const file_name = document.getElementById("filename").value; loader.innerHTML = ''; location.href = "https://tagmp3.net/save.php?f=" + encodeURIComponent(file_name);};</script> <style>.tag-editor { background: #979595; padding: 4px; margin: auto; max-width: 700px; text-align: center; }form#uplForm { text-align: center; background: #dfdfdf; box-shadow: 0 10px 30px rgba(0, 0, 0, .45); border-radius: 14px; max-width: 500px; margin: 20px auto 20px; }#uplForm .fn {color:#3d3d3d;font-size: 14px} input#file { border-radius: 20px; padding: 10px; margin-bottom: 14px; max-width: 350px; width: 100%;}.cards-wrapper { max-width: 520px; margin: 20px auto; padding: 10px;}.tag-card { background: #1f1f1f; border-radius: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.45); overflow: hidden; color: #fff;}.tag-card .card-header { background: linear-gradient(135deg, #0d6efd, #6610f2); padding: 14px 16px; font-weight: 700; font-size: 15px; text-align: center; word-break: break-all;}.tag-card .card-body { padding: 16px;}.albumart {background: #353535;padding: 10px;text-align:center;}.album-art { width: 160px; height: 160px; border-radius: 12px; background: #2a2a2a; box-shadow: 0 6px 20px rgba(0,0,0,.5); }.form-label { font-size: 13px; color: #aaa; margin-bottom: 4px;width: 100px;display: inline-block;}.form-control { background: #2b2b2b; border: 1px solid #3a3a3a; color: #fff; border-radius: 8px; padding: 9px 12px;}.form-control:focus { outline: none; background: #2b2b2b; border-color: #0d6efd; box-shadow: 0 0 0 2px rgba(13,110,253,.25); color: #fff;}input[type="file"].form-control { padding: 6px;}.mb-3 { margin-bottom: 12px;}.btn-success { background: linear-gradient(135deg, #ff45ad, #7b1987); border: none; padding: 12px 28px; border-radius: 20px; font-size: 16px; font-weight: 600;}.btn-success:hover { filter: brightness(1.1); transform: translateY(-1px);}.center { text-align: center;}</style>