关于最新版本listen1 (2.1.6)的修改心得(添加下载功能)

注：本文只作为技术交流

前言

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

上一篇的文章没有解决跨域问题(命名不能正确命名), 上一篇文章 地址

这次解决了,并简单的美化了下载载图标

如果改不明白直接下载我更改的资源即可 下载地址

效果图

首先照样更改 loweb.js文件

选中内容为新增的代码(就是在successCallback函数中添加两行代码)

下面这段方便复制

button = document.getElementById('download_music')
button.mp3url = sound.url

在 html引入自己新建的js和css

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

<link rel="stylesheet" type="text/css" href="css/iconfont.css">
<link rel="stylesheet" type="text/css" href="css/me.css">
<script type="text/javascript" src="js/download2.js"></script>

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

iconfont.css是我从阿里巴巴官网下载的图标文件(显示下载图标)
iconfont.css文件内容:

@font-face {font-family: "iconfont";
  src: url('iconfont.eot?t=1558084334586'); /* IE9 */
  src: url('iconfont.eot?t=1558084334586#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAJ8AAsAAAAABjQAAAIwAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCcAo8WQE2AiQDCAsGAAQgBYRtBzIbgQUR1YtVsi8OMrnE7peizckfRUSW2KbNqW0TymQa73sQ1X75PbvzLpu9ACtElYoEAoWoYhFUYjRQ+VSESnn4yO7ra8BNZmubm1XXqAjFkpzn/dYdaTfhQn51tcof1wDweS6nN4EOZNQHym1PGmvymICBpQHuhVEvkhLKuGHsghd4HwJ4MilHmrauIRyKvUwAWc0LU7hCGEVZziGEGvYqck6AM6cmOIu+L78rxIEhsNgNffPNs9R923MKLJGd0YAgAgI6HAAWKAcUZKgx3YNFGGfxx5VcQFEEvu1FItiFHNWOsL/Oro4BIB0qnknpHUAAMABoMh4PpEx6HxgXta7ixJtEO/ny1htfcT9sxHCUbv8Cpc92qMM/s7tmAQQ+PQxvIr7qvwsrAM/qv8imDPOC24FH4EcoB/apobadRjVlo9cQP2mpATweiGB/Eu+mWlLPmhccqef2RpGRweLIJ5UtR0CYSoRw1MJTRuvhMMmsYRGNBko5BBASuIUhjkdYEngilX2LgDT+IkSCWHhGJPnMMIViZd3IaAQ92D9kR3tw3aLj2ivGdzOcV0f8E/nMMZiHqZy74I68xIbzExeRAIGpwwYew9YIDqaCToYkcqzjGJpeNDjqStPIaAQ92D9kR3sIRouufP6K8d0MdzTVZZ/IZ54c5mEaQF4M+6CmR3nm/MRFJEBg6rCBWdgawdE8q6CTIU1IHuvoDAtDDcP2pv4D5awN22rEmW5xs/TdGxmvFAAA') format('woff2'),
  url('iconfont.woff?t=1558084334586') format('woff'),
  url('iconfont.ttf?t=1558084334586') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  url('iconfont.svg?t=1558084334586#iconfont') format('svg'); /* iOS 4.1- */
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-download:before {
  content: "\e682";
}

me.css文件内容:

#download_music{
    cursor: pointer;
    color: #7F7F7F;
    margin-right: 3px;
}
#download_music:hover{
    color: black;
}

到此在对应文件引入就已经完成了,接下来继续修改html

修改 html(添加下载标签)

在html代码添加如下部分
(光标所在位置为插入部分,大约在447行左右)

下面这段方便复制

<a title="下载此歌曲" class="iconfont icon-download" id="download_music" mp3url=""  ng-click="download_music(currentPlaying.artist,currentPlaying.title)"></a>

在 app.js 里面添加 ng-click 监听事件

在 app.js 文件的 272 行左右添加

$scope.download_music = (artist_name,song_name) => {
        var mp3url = document.getElementById('download_music').mp3url
        var strs=mp3url.split('.'); //字符分割
        var houzhui = strs[strs.length-1].substring(0, 3);
        var filename = song_name +" - "+artist_name;
        var x=new XMLHttpRequest();
        x.open("GET", mp3url, true);
        x.responseType = 'blob';
        x.onload=function(e){download(x.response, filename+'.'+houzhui);};
        x.send();
      };

到此大功告成!