关于最新版本listen1 (2.24.0)(添加下载功能)

首先更改 navigation.js文件

115 行下边添加：

 // 下面是我改的$scope.download_music = (song) => {const strs =song.url.split('.'); // 字符分割const houzhui = strs[strs.length - 1].substring(0, 3);const filename = song.artist+" - "+song.title ;const x = new XMLHttpRequest();x.open("GET",song.url, true);x.responseType = 'blob';// eslint-disable-next-line no-undefx.onload=function(e){download(x.response, `${filename}.${houzhui}`);};x.send();};//

修改listen1.html(添加下载标签)

22 行下边添加：

<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>

1862 行下边添加：

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

直接在js目录下新建这个download2.js文件：

//download.js v4.2, by dandavis; 2008-2016. [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. 3.1 improved safari handling.
// v4 adds AMD/UMD, commonJS, and plain browser support
// v4.1 adds url download capability via solo URL argument (same domain/CORS only)
// v4.2 adds semantic variable names, long (over 2MB) dataURL support, and hidden by default temp anchors
// https://github.com/rndme/downloadfunction download(data, strFileName, strMimeType) {var self = window, // this script is only for browsers anyway...defaultMime = "application/octet-stream", // this default mime also triggers iframe downloadsmimeType = strMimeType || defaultMime,payload = data,url = !strFileName && !strMimeType && payload,anchor = document.createElement("a"),toString = function(a){return String(a);},myBlob = (self.Blob || self.MozBlob || self.WebKitBlob || toString),fileName = strFileName || "download",blob,reader;myBlob= myBlob.call ? myBlob.bind(self) : Blob ;if(String(this)==="true"){ //reverse arguments, allowing download.bind(true, "text/xml", "export.xml") to act as a callbackpayload=[payload, mimeType];mimeType=payload[0];payload=payload[1];}if(url && url.length< 2048){ // if no filename and no mime, assume a url was passed as the only argumentfileName = url.split("/").pop().split("?")[0];anchor.href = url; // assign href prop to temp anchorif(anchor.href.indexOf(url) !== -1){ // if the browser determines that it's a potentially valid url path:var ajax=new XMLHttpRequest();ajax.open( "GET", url, true);ajax.responseType = 'blob';ajax.onload= function(e){download(e.target.response, fileName, defaultMime);};setTimeout(function(){ ajax.send();}, 0); // allows setting custom ajax headers using the return:return ajax;} // end if valid url?} // end if url?//go ahead and download dataURLs right awayif(/^data\:[\w+\-]+\/[\w+\-]+[,;]/.test(payload)){if(payload.length > (1024*1024*1.999) && myBlob !== toString ){payload=dataUrlToBlob(payload);mimeType=payload.type || defaultMime;}else{return navigator.msSaveBlob ?  // IE10 can't do a[download], only Blobs:navigator.msSaveBlob(dataUrlToBlob(payload), fileName) :saver(payload) ; // everyone else can save dataURLs un-processed}}//end if dataURL passed?blob = payload instanceof myBlob ?payload :new myBlob([payload], {type: mimeType}) ;function dataUrlToBlob(strUrl) {var parts= strUrl.split(/[:;,]/),type= parts[1],decoder= parts[2] == "base64" ? atob : decodeURIComponent,binData= decoder( parts.pop() ),mx= binData.length,i= 0,uiArr= new Uint8Array(mx);for(i;i<mx;++i) uiArr[i]= binData.charCodeAt(i);return new myBlob([uiArr], {type: type});}function saver(url, winMode){if ('download' in anchor) { //html5 A[download]anchor.href = url;anchor.setAttribute("download", fileName);anchor.className = "download-js-link";anchor.innerHTML = "downloading...";anchor.style.display = "none";document.body.appendChild(anchor);setTimeout(function() {anchor.click();document.body.removeChild(anchor);if(winMode===true){setTimeout(function(){ self.URL.revokeObjectURL(anchor.href);}, 250 );}}, 66);return true;}// handle non-a[download] safari as best we can:if(/(Version)\/(\d+)\.(\d+)(?:\.(\d+))?.*Safari\//.test(navigator.userAgent)) {url=url.replace(/^data:([\w\/\-\+]+)/, defaultMime);if(!window.open(url)){ // popup blocked, offer direct download:if(confirm("Displaying New Document\n\nUse Save As... to download, then click back to return to this page.")){ location.href=url; }}return true;}//do iframe dataURL download (old ch+FF):var f = document.createElement("iframe");document.body.appendChild(f);if(!winMode){ // force a mime that will download:url="data:"+url.replace(/^data:([\w\/\-\+]+)/, defaultMime);}f.src=url;setTimeout(function(){ document.body.removeChild(f); }, 333);}//end saverif (navigator.msSaveBlob) { // IE10+ : (has Blob, but not a[download] or URL)return navigator.msSaveBlob(blob, fileName);}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===toString ){try{return saver( "data:" +  mimeType   + ";base64,"  +  self.btoa(blob)  );}catch(y){return saver( "data:" +  mimeType   + "," + encodeURIComponent(blob)  );}}// Blob but not URL support:reader=new FileReader();reader.onload=function(e){saver(this.result);};reader.readAsDataURL(blob);}return true;}; /* end download() */

在 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";
}

在 css 目录下新建me.css文件内容:

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

关于最新版本listen1 (2.24.0)(添加下载功能)相关推荐

关于最新版本listen1 (2.24.0)的修改心得(添加下载功能)
注:本文只作为技术交流前言再次感谢 listen1 的作者开发出如此强大的音乐播放器项目地址感谢Hello_wshuo的
windows安装VMware最新版本(VMware Workstation 17.0 Pro)详细教程
专栏地址:嵌入式开发专栏文章: [01]windows安装VMware最新版本(VMware Workstation 17.0 Pro)详细教程 [02]VMware17虚拟机安装Ubuntu最新版 ...
javascript功能_最新版本JavaScript仅具有2个新功能。这是他们的工作方式。
javascript功能 by Tiago Lopes Ferreira 由Tiago Lopes Ferreira 最新版本JavaScript仅具有2个新功能. 这是他们的工作方式. (The n ...
常用一些缺失dll文件下载网址，最新版本的 Microsoft Visual C++ 的下载链接
最新版本的 Microsoft Visual C++ 的下载链接 https://support.microsoft.com/zh-cn/help/2977003/the-latest-support ...
关于最新版本listen1 (2.1.6)的修改心得(添加下载功能)
注:本文只作为技术交流前言再次感谢 listen1 的作者开发出如此强大的音乐播放器项目地址上一篇的文章没有解决跨域问题(命名不能正确命名), 上一篇文章地址这次解决了,并简单的美化了下载 ...
【转】CentOS 6.6 升级GCC G++ (当前最新版本为v6.1.0) (完整)
原文地址:https://www.cnblogs.com/lzpong/p/5755678.html 我这里是centos7 升级到gcc8.1,过程差不多,参考这篇文章,记录一下. ---原文--- ...
MacOS 安装 gstreamer 最新版本（1.20.0）
近期 gstreamer 退出了最新版本 1.20.0,这个版本支持 MacOS,于是尝试安装.步骤虽然简单,但是仍然有一些需要注意的地方,在这里做一些安装步骤的说明. 下载地址:Download G ...
【Nginx】Nginx 发布最新稳定版-1.24.0
2023年4月11日,官方发布了Nginx最新稳定版,版本号为 1.24.0. 该版本是基于1.23.x(1.23.0 - 1.23.4)开发版的Bug修复,以及一些新特性的加入,而形成的稳定版. 如 ...
64位Ubunu 16.04系统安装最新版本的wine 4.0
wine的最新版本已经更新到4.0了,那么如何在64位Ubuntu 16.04系统下安装呢?网上不少方法都过时了,下面就整理一个最新的方法,亲测有效! 第一步,64位的系统必须首先使能对32位架构的支 ...

关于最新版本listen1 (2.24.0)(添加下载功能)

关于最新版本listen1 (2.24.0)(添加下载功能)相关推荐

最新文章

热门文章