堆棧內存溢出
  簡體   English   中英

如何從 mp3 文件中獲取元數據並將它們放入 HTML 格式？

[英]How can I get the metadata from mp3 files and put them into HTML format?

 原文  2020-07-29 01:45:22  1   1    javascript/ html/ jquery/ css/ mp3

問題描述

我想獲取 ID3 元數據並將它們放入 HTML 格式。

我遇到的問題是我對 JavaScript/PHP 或除 HTML 和 CSS 之外的任何其他語言幾乎一無所知，所以基本上我很難找到任何我能理解的關於這個主題的東西。

我基本上是想找到一種方法來放置這些元數據：藝術家、專輯、流派、持續時間、年份、曲目、標題。 關於持續時間，如果只有一首曲目，曲目的時長是 5 分鍾，那么如果有 5 首曲目，我想基本上結合這些曲目的整個時長，如果每首曲目都是 5 分鍾長，那么結果將是25分鍾。 另外關於曲目編號，我不知道是否有可能擁有每個曲目編號，並且在他們旁邊有曲目的標題，所以如果可能的話，它也會很高興。

這是我創建的 HTML 格式。 我將解釋代碼上的幾乎所有內容。 當這完成后，我會告訴你它會是什么樣子。

      <div class="line-content"> <!-- PLACEHOLDER Collapsible -->
        <div name="PLACEHOLDER">
          <button type="button" class="collapsible button"><img class="limg" src="forsongstab/covers/PLACEHOLDER.jpeg">PLACEHOLDER</button>
          <div class="content">
            <p><img class="fimg" src="forsongstab/covers/PLACEHOLDER.jpeg">
              <table class="pl5 lh1-4"><tr>
                <td>Artist/Band:</td>
                <td>PLACEHOLDER</td>
              </tr><tr>
                <td>Album:</td>
                <td>PLACEHOLDER</td>
              </tr><tr>
                <td>Gerne:</td>
                <td>PLACEHOLDER</td>
              </tr><tr>
                <td>Duration:</td>
                <td>PLACEHOLDER</td>
              </tr><tr>
                <td>Release Date:</td>
                <td>PLACEHOLDER</td>
              </tr><tr>
                <td>Size:</td>
                <td>PLACEHOLDER</td>
              </tr></table>
              <table class="pl5 lh1-4"><tr><td>
                01. PLACEHOLDER<br>
              </td></tr></table>
            <p class="pl40"><a href="forsongstab/zips/PLACEHOLDER.zip" download="forsongstab/zips/PLACEHOLDER.zip">Download the whole Album.</a></p></p>
          </div><p></p>
        </div>
      </div>

好的，所以你可以看到很多PLACEHOLDER詞，這基本上就是所有元數據 go 的位置。

<div class="line-content">用於分頁，因為有數百張專輯需要它。

<!-- PLACEHOLDER Collapsible -->只是一個注釋，因此可以很容易地在代碼中看到並與其他專輯區分開來。 在這個 PLACERHOLDER 中，藝術家和專輯的名稱將為 go。 例如<!-- 1000mods - Vultures Collapsible --> ，名稱 1000mods 是藝術家/樂隊（並不重要），名稱 Vultures 是專輯的名稱。

<div name="PLACEHOLDER">也類似於注釋，但它只是為了使事情保持平衡而不需要注釋，但仍然是必要的。 同樣在 PLACERHOLDER 中，輸入將與評論相同。

<button type="button" class="collapsible button"><img class="limg" src="forsongstab/covers/PLACERHOLDER.jpeg">PLACERHOLDER</button>有很多部分，所以讓我解釋一下。 <button>用於可折疊。 現在其他兩個 PLACERHOLDERS 需要與評論具有相同的名稱，因此基本上具有藝術家/樂隊和專輯名稱，如前面的示例所示。

<div class="content">用於可折疊。

<p><img class="fimg" src="forsongstab/covers/PLACEHOLDER.jpeg">和其他的一樣，必須將 PLACEHOLDER 更改為藝術家/樂隊和專輯名稱。

現在基本上你可以看到一張桌子，我認為很清楚去哪里了，但我仍然會解釋它。

在第一行，我們有藝術家/樂隊：在 PLACEHOLDER 上，我們添加藝術家元數據。

在第二行，我們有專輯：在 PLACEHOLDER 上，我們添加專輯元數據。

在第三行我們有 Gerne: 在那個 PLACEHOLDER 上我們添加了 gerne 元數據。

在第四行，我們有持續時間：在那個 PLACEHOLDER 上，我們添加了該特定專輯中所有曲目的持續時間。

在第五行，我們有發布日期：在那個 PLACEHOLDER 上，我們添加了年份元數據。

在第六行和最后一行，我們有大小：在那個 PLACEHOLDER 上，我們添加專輯中曲目的總大小，我的意思是 MB。

現在下一個表將用於在一個地方放置曲目編號和標題。 你可以看到 01. 這將是曲目的編號，然后它應該有一個正常的空間來突出名稱而不是連續的模糊文本行，然后它應該有一個<br> （即使它只是一首曲目）。

<p class="pl40"><a href="forsongstab/zips/PLACEHOLDER.zip" download="forsongstab/zips/PLACEHOLDER.zip">Download the whole Album.</a></p></p>也有很多部分，所以讓我解釋一下。 <p class="p140">基本上是為該文本添加樣式。 這些 PLACEHOLDERS 上的<a href="forsongstab/zips/PLACEHOLDER.zip" download="forsongstab/zips/PLACEHOLDER.zip">藝術家/樂隊和專輯名稱將為 go，如評論中所示。 文本和</a></p></p>根本不會打擾我們，所以我們將其留在那里。

現在其他</div>只是關閉其他 div 並且似乎不合適的段落只是在可折疊之間添加一些空間。

這就是它應該是什么樣子的。

      <div class="line-content"> <!-- 1000mods - Vultures Collapsible -->
        <div name="1000mods - Vultures">
          <button type="button" class="collapsible button"><img class="limg" src="forsongstab/covers/1000mods - Vultures.jpeg">1000mods - Vultures</button>
          <div class="content">
            <p><img class="fimg" src="forsongstab/covers/1000mods - Vultures.jpeg">
              <table class="pl5 lh1-4"><tr>
                <td>Artist/Band:</td>
                <td>1000mods</td>
              </tr><tr>
                <td>Album:</td>
                <td>Vultures</td>
              </tr><tr>
                <td>Gerne:</td>
                <td>Stoner Rock</td>
              </tr><tr>
                <td>Duration:</td>
                <td>00:38:14</td>
              </tr><tr>
                <td>Release Date:</td>
                <td>2014</td>
              </tr><tr>
                <td>Size:</td>
                <td>69,1 MB</td>
              </tr></table>
              <table class="pl5 lh1-4"><tr><td>
                01. Claws<br>
                02. Big Beautiful<br>
                03. She<br>
                04. Horses Green<br>
                05. Low<br>
                06. Vultures<br>
                07. Modesty<br>
                08. Reverb of the New World<br>
              </td></tr></table>
            <p class="pl40"><a href="forsongstab/zips/1000mods - Vultures.zip" download="forsongstab/zips/1000mods - Vultures.zip">Download the whole Album.</a></p></p>
          </div><p></p>
        </div>
      </div>

現在的問題是，我不知道是否有人有辦法實際制作可以幫助我解決此問題的東西，也不知道如何向我解釋如何實際編寫這樣的代碼。 因此，如果有人真的知道如何找到一種方法來為此制作 JavaScript 或者有一個可以幫助我的程序，我將非常感激。

感謝您的幫助和耐心閱讀所有這些內容。 如果您有任何問題，請在此處發表評論，我會盡力回復並找到答案。

1 個解決方案

解決方案1
 0  2020-07-29 04:32:09

這個有可能。 不適用於 JavaScript。 使用 php 應該很容易。

這並不像 id3v1 有限和 id3v2 那樣容易......假設它需要數據存儲，它不能動態讀取*。 我決定使用 id3v1.1 來 go - 現在你只需要一個帶有 php7 解析器和 favicon 的服務器。 里面的說明。 復制 php 腳本並保存為文本文件 index.php utf-8 是否帶 BOM（無關）。 就像這樣，您可以使用記事本。 將此文件放在帶有 style.css 和 favicon.ico 的服務器上並運行 - 也就是說，在瀏覽器中鍵入地址並瞧瞧。

index.php

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="robots" content="none">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./style.css"><title>mp3</title></head><body>
<?php
function readid3($file){
    $genre = [ 'Blues', 'Classic rock', 'Country', 'Dance', 'Disco', 'Funk', 'Grunge', 'Hip-Hop', 'Jazz', 'Metal', 'New Age', 'Oldies', 'Other', 'Pop', 'Rhythm and Blues', 'Rap', 'Reggae', 'Rock', 'Techno', 'Industrial', 'Alternative', 'Ska', 'Death metal', 'Pranks', 'Soundtrack', 'Euro-Techno', 'Ambient', 'Trip-Hop', 'Vocal', 'Jazz & Funk', 'Fusion', 'Trance', 'Classical', 'Instrumental', 'Acid', 'House', 'Game', 'Sound clip', 'Gospel', 'Noise', 'Alternative Rock', 'Bass', 'Soul', 'Punk', 'Space', 'Meditative', 'Instrumental Pop', 'Instrumental Rock', 'Ethnic', 'Gothic', 'Darkwave', 'Techno-Industrial', 'Electronic', 'Pop-Folk', 'Eurodance', 'Dream', 'Southern Rock', 'Comedy', 'Cult', 'Gangsta', 'Top 40', 'Christian Rap', 'Pop/Funk', 'Jungle', 'Native US', 'Cabaret', 'New Wave', 'Psychedelic', 'Rave', 'Show tunes', 'Trailer', 'Lo-Fi', 'Tribal', 'Acid Punk', 'Acid Jazz', 'Polka', 'Retro', 'Musical', "Rock 'n' Roll", 'Hard rock' ];    
    $f = fopen("./mp3/$file",'rb');
    fseek($f, -128, SEEK_END);  
    $id3 = fread($f,128);
    fclose($f);
    $meta = unpack("a3header/a30title/a30artist/a30album/a4year/a28comment/a1zero/c1track/c1genre", preg_replace('/[\x00-\x1F\x7F]/', ' ', $id3));
    $meta = array_map(trim,$meta);
    $meta[genre] = $genre[$meta[genre]];
    return($meta);}
function start(){
    $once = 10;
    $dir = './mp3';
    $cover = './cover';
    $page = $_GET[page] ?? 1;
    $stop = $page*$once;
    $start = $stop - $once;
    foreach([$dir, $cover] as $val){    is_dir($val) ? '' : mkdir($val);}
    $mp3 = array_slice(scandir($dir),2);
    $count = count($mp3);
    if($count < 1){ echo"<p>You have no files in the $dir directiory</p><p>To display cover art, place file mp3_file_name.jpg in the $cover directory</p>";}
    else{
        foreach($mp3 as $key=>$val){
            if(($key >= $start) && ($key < $stop)){
                $m = readid3($val);
                $img = strtr($val,['mp3'=>'jpg']);
                $m[size] = round(filesize("$dir/$val")/1048576,2).' MB';
                echo"<details><summary><b>$m[title]</b><b>$m[artist]</b><b>$m[album]</b></summary>\r\n<figure><img src=\"$cover/$img\" alt=\"cover\">\r\n";
                echo"<figcaption><a download=\"$val\" href=\"$val\">download</a>\r\n</figcaption></figure><table>\r\n";
                foreach([title, artist, album, genre, year, track, size, comment] as $val){ echo    "<tr><th>$val</th><td>$m[$val]</td></tr>\r\n";}
                echo"</table></details>\r\n";}}
        foreach(range(1,(int)ceil($count/$once)) as $val){  echo"<a href=\"?page=$val\">$val</a>";}}}
start();
?></body></html>

樣式.css

*{ box-sizing: border-box; outline: 0}
body{ text-align: center; color: #013; padding-top: 5vh;  background: #fff}
a{ text-decoration: none; display: inline-block; margin: 10px 20px; color: inherit; background: linear-gradient(to top, #468, #fff, #79b);border-radius: 20px; padding: 15px;}
a:not([download]){ border-radius: 50%; width: 50px}
details{ border: 1px solid #abd; margin: 2vh auto}
summary{ display: block; background: #def; padding: 20px 10px; background: linear-gradient(to top, #468, #fff, #79b);}
summary b{ font: inherit; display: inline-block; vertical-align: middle; width: 32%; }
details:hover b{ font-weight: bold}
figure, table{ display: inline-block; vertical-align: middle; margin: 5px 2vw}
img{ max-width: 100%}
th, td{ padding: 5px 10px}
th{ width: auto; color: #456; font: normal normal 0.9em sans-serif}

這並不完全符合您的要求 - 如果沒有數據存儲，就無法將曲目組合到專輯中，並且必須計算持續時間並且無法動態完成*。
.* 不能動態完成——理論上是可能的，但它將是世界上最慢的站點和服務器殺手。

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 如何從 mp3 文件中獲取數據並自動將其放在 html 上？ 如何從MP3文件中獲取振幅數據？ 如何使用javascript和html循環播放mp3文件 如何鏈接來自 <ul> 播放清單相同 <audio> 標簽？ 如何使用Javascript通過URL鏈接檢索MP3元數據？ 如何獲得 mp3 文件的封面？ 如何在 JavaScript 中從 MP3 文件中讀取元數據屬性？ 如何使用 AJAX 與其他 FormData 一起上傳 .mp4、.mp3 和 .doc 文件？ 我可以使用Javascript將MP3文件拆分成較小的MP3文件嗎？ Node.js將html啟動到localhost：8000，如何在該html文件中調用.mp3 / .mp4文件
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM