堆栈内存溢出
  繁体   English   中英

如何从 mp3 文件中获取元数据并将它们放入 HTML 格式？

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

 原文  2020-07-29 01:45:22  5   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