Vue获取歌曲信息（封面图，歌曲名称等）

sunsiyuandd

已于 2022-07-07 13:50:46 修改

阅读量1.4k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签：大数据

于 2022-07-06 12:12:42 首次发布

本文链接：https://blog.youkuaiyun.com/sunsiyuandd/article/details/125636317

Vue 专栏收录该内容

1 篇文章

订阅专栏

该博客围绕项目需求展开，需在上传歌曲时上传封面图。查阅资料后，作者未采用推荐的ID3，而是在npm仓库找到符合需求的插件。介绍了在Vue2+js环境下的安装与引入方式，主要使用fetchFromUrl获取在线歌曲信息，还提及获取的歌曲封面信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言：

最近有个项目需求是上传歌曲的同时将歌曲的封面图也上传上去，查阅了一些资料都是推荐使用ID3，然而安装的时候出现了一些问题，于是去npm仓库上看了一下，发现了这个插件，插件描述也符合项目需求，于是试了一下。

正文（代码在最后）

环境Vue2+js

安装：

npm install music-metadata-browser

引入

const musicMetadata = require('music-metadata-browser');

把引入的插件打印了一下，有如下几个API，结合文档我这里主要用到fetchFromUrl获取在线歌曲信息。

这里是获取的歌曲封面信息，picture[0].data就是封面图的二进制流

代码

<template>
  <div id="app">
	<input type="file" name="" id="input">
	<button @click="getFile">查看文件</button>
	<button @click="uploadFile">上传文件</button>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
import OSS from "ali-oss";
const musicMetadata = require('music-metadata-browser');
// import musicMetadata from 'music-metadata-browser';

export default {
  name: 'app',
  components: {
    HelloWorld
  },
  data() {
  	return {
  		mp3Url: "http://xxxxx.mp3",//在线MP3地址
		mp3File:null,// 存储文件
  	}
  },
  mounted(){
	console.log("musicMetadata",musicMetadata);
	this.getOptions();// 获取歌曲标签
  },
  methods: {
	  getFile(){
		const input = document.getElementById("input");
		console.log("input",input.files[0]);
	  },
  	async getOptions() {
		const metadata = await musicMetadata.fetchFromUrl(this.mp3Url, {});
		console.log("歌曲信息",metadata);
		const dataArr = metadata.common.picture[0].data;
		console.log("封面图二进制流",dataArr);
		var data = new Blob([dataArr], { type: "image/png" });
		  // blob对象转File对象
		  const files = new window.File([data], "图片", { type: data.type });
		  console.log("封面图文件",files);
		  this.mp3File = files;
		  // TODO 接下来可以执行上传操作
  	},
    // 这里是OSS直传操作
	uploadFile(){
		var client = new OSS({
		  region: "oss-cn-hangzhou",
		  secure: false, // secure0.0  : 配合region使用，如果指定了secure为true，则使用HTTPS访问
		  accessKeyId: "xxxxxx",// 项目的accessKeyId
		  accessKeySecret: "xxxxxxx",// 项目的accessKeySecret
		  bucket: "xxxxxx",// 项目的bucketName
		});
		client.put("王大锤.png", this.mp3File).then((res) => {
		      console.log("上传结果",res);
		});
	}
  },
}
</script>