Listen 1添加下载功能（列表下载方法）(v2.6)

再见814

已于 2023-02-24 16:55:35 修改

阅读量9.9k

点赞数 2

分类专栏：音乐 Listen1 文章标签： javascript chrome 前端开发语言 github

于 2022-09-10 18:51:32 首次发布

本文链接：https://blog.csdn.net/qq_15124539/article/details/126798304

版权

音乐同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

Listen1

1 篇文章 0 订阅

订阅专栏

感谢 listen1 的项目的作者和开发者做出如此强大的音乐播放器项目地址

感谢Hello_wshuo提供的方案思路和代码

可以下载我已经改好的源码（在selfUse支线）

修改后代码链接

本代码对Hello_wshuo提供的方法进行了简化并且改成了在列表页下载

效果

1，首先照样更改js/controller里的navigation.js文件

选中内容为新增的代码(就是在angular模块内添加以下代码)

下面这段方便复制

    $scope.download_music = (song) => {
      MediaService.bootstrapTrack(
        song,
        (bootinfo) => {
          const mp3url = bootinfo.url
          const strs = mp3url.split('.'); //字符分割 
          const houzhui = strs[strs.length-1].substring(0, 3);
          const filename = song.title +" - "+song.artist;
          const request = new XMLHttpRequest();
          request.open("GET", mp3url, true);
          request.responseType = 'blob';
          request.onload=function(e){download(x.response, filename+'.'+houzhui);};
          request.send();
        },
        () => {
          notyf.warning('下载失败，请搜索其他平台');
        }
      );
    }

（选填）创建下载时可能会有点延时可以在成功回调里添加一个提醒(红线位置)

notyf.success('正在创建下载歌曲');

2，创建引入外部js文件

这里我引入了一个download2.js的js脚本,这个脚本就是解决跨域下载文件不能正确重命名的方法,这个是别人写好的一个组件网站
你也可以直接在js目录下新建这个download2.js文件

此方法由@Hello_wshuo提供
download2.js文件内容:

//download.js v3.0, by dandavis; 2008-2014. [CCBY2] see http://danml.com/download.html for tests/usage
// v1 landed a FF+Chrome compat way of downloading strings to local un-named files, upgraded to use a hidden frame and optional mime
// v2 added named files via a[download], msSaveBlob, IE (10+) support, and window.URL support for larger+faster saves than dataURLs
// v3 added dataURL and Blob Input, bind-toggle arity, and legacy dataURL fallback was improved with force-download mime and base64 support

// data can be a string, Blob, File, or dataURL

		 
						 
						 
function download(data, strFileName, strMimeType) {
	
	var self = window, // this script is only for browsers anyway...
		u = "application/octet-stream", // this default mime also triggers iframe downloads
		m = strMimeType || u, 
		x = data,
		D = document,
		a = D.createElement("a"),
		z = function(a){return String(a);},
		
		
		B = self.Blob || self.MozBlob || self.WebKitBlob || z,
		BB = self.MSBlobBuilder || self.WebKitBlobBuilder || self.BlobBuilder,
		fn = strFileName || "download",
		blob, 
		b,
		ua,
		fr;

	//if(typeof B.bind === 'function' ){ B=B.bind(self); }
	
	if(String(this)==="true"){ //reverse arguments, allowing download.bind(true, "text/xml", "export.xml") to act as a callback
		x=[x, m];
		m=x[0];
		x=x[1]; 
	}
	
	
	
	//go ahead and download dataURLs right away
	if(String(x).match(/^data\:[\w+\-]+\/[\w+\-]+[,;]/)){
		return navigator.msSaveBlob ?  // IE10 can't do a[download], only Blobs:
			navigator.msSaveBlob(d2b(x), fn) : 
			saver(x) ; // everyone else can save dataURLs un-processed
	}//end if dataURL passed?
	
	try{
	
		blob = x instanceof B ? 
			x : 
			new B([x], {type: m}) ;
	}catch(y){
		if(BB){
			b = new BB();
			b.append([x]);
			blob = b.getBlob(m); // the blob
		}
		
	}
	
	
	
	function d2b(u) {
		var p= u.split(/[:;,]/),
		t= p[1],
		dec= p[2] == "base64" ? atob : decodeURIComponent,
		bin= dec(p.pop()),
		mx= bin.length,
		i= 0,
		uia= new Uint8Array(mx);

		for(i;i<mx;++i) uia[i]= bin.charCodeAt(i);

		return new B([uia], {type: t});
	 }
	  
	function saver(url, winMode){
		
		
		if ('download' in a) { //html5 A[download] 			
			a.href = url;
			a.setAttribute("download", fn);
			a.innerHTML = "downloading...";
			D.body.appendChild(a);
			setTimeout(function() {
				a.click();
				D.body.removeChild(a);
				if(winMode===true){setTimeout(function(){ self.URL.revokeObjectURL(a.href);}, 250 );}
			}, 66);
			return true;
		}
		
		//do iframe dataURL download (old ch+FF):
		var f = D.createElement("iframe");
		D.body.appendChild(f);
		if(!winMode){ // force a mime that will download:
			url="data:"+url.replace(/^data:([\w\/\-\+]+)/, u);
		}
		 
	
		f.src = url;
		setTimeout(function(){ D.body.removeChild(f); }, 333);
		
	}//end saver 
		

	if (navigator.msSaveBlob) { // IE10+ : (has Blob, but not a[download] or URL)
		return navigator.msSaveBlob(blob, fn);
	} 	
	
	if(self.URL){ // simple fast and modern way using Blob and URL:
		saver(self.URL.createObjectURL(blob), true);
	}else{
		// handle non-Blob()+non-URL browsers:
		if(typeof blob === "string" || blob.constructor===z ){
			try{
				return saver( "data:" +  m   + ";base64,"  +  self.btoa(blob)  ); 
			}catch(y){
				return saver( "data:" +  m   + "," + encodeURIComponent(blob)  ); 
			}
		}
		
		// Blob but not URL:
		fr=new FileReader();
		fr.onload=function(e){
			saver(this.result); 
		};
		fr.readAsDataURL(blob);
	}	
	return true;
} /* end download() */

在 html引入自己新建的js

更改文件是 listen1.html ,在 html 合适位置插入即可

<script type="text/javascript" src="js/download2.js"></script>

3，最后在歌单列表搜索列表位置上添加一个a或span便签即可

大概位置在类名为tools的一个div里（例如下图是当前播放列表的位置）（需要插入多个地方，可以根据自己习惯选择）

下面这段方便复制

 <a
                                  title="{{_DOWNLOAD_SONG}}"
                                  class="source-button"
                                  ng-click="download_music(song)"
                                  ng-show="options && !is_local" 
                                  >
                                  <svg t="1662779991230" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2821" width="512" height="512"><path d="M828.975746 894.125047 190.189132 894.125047c-70.550823 0-127.753639-57.18542-127.753639-127.752616L62.435493 606.674243c0-17.634636 14.308891-31.933293 31.93227-31.933293l63.889099 0c17.634636 0 31.93227 14.298658 31.93227 31.933293l0 95.821369c0 35.282574 28.596292 63.877843 63.87682 63.877843L765.098927 766.373455c35.281551 0 63.87682-28.595268 63.87682-63.877843l0-95.821369c0-17.634636 14.298658-31.933293 31.943526-31.933293l63.877843 0c17.634636 0 31.933293 14.298658 31.933293 31.933293l0 159.699212C956.729385 836.939627 899.538849 894.125047 828.975746 894.125047L828.975746 894.125047zM249.938957 267.509636c12.921287-12.919241 33.884738-12.919241 46.807049 0l148.97087 148.971893L445.716876 94.89323c0-17.634636 14.300704-31.94762 31.933293-31.94762l63.875796 0c17.637706 0 31.945573 14.312984 31.945573 31.94762l0 321.588299 148.97087-148.971893c12.921287-12.919241 33.875528-12.919241 46.796816 0l46.814212 46.818305c12.921287 12.922311 12.921287 33.874505 0 46.807049L552.261471 624.930025c-1.140986 1.137916-21.664416 13.68365-42.315758 13.69286-20.87647 0.010233-41.878806-12.541641-43.020816-13.69286L203.121676 361.13499c-12.922311-12.933567-12.922311-33.884738 0-46.807049L249.938957 267.509636 249.938957 267.509636z" fill="currentColor" p-id="2822"></path></svg>
                                 </a>

到此完工