jQuery+Bootstrap 音乐排序试听器(后台ASP)

年会马上就到了,音乐编辑的担子有落到了技术部。自己剪了几曲,领导们不满意,于是写个简单的 JQuery+BootStarp工具,让领导们自己去排顺序。
2015nh

分析了下, Media Player 使用了 WPL 格式的音乐列表,使用UTF-8编码。用ASP写入到文件中。实现的功能,还需要有 保存列表,试听功能。
/index.asp 主程序
/m3u 存放列表
/mp3 存放MP3源文件
/temp 存放临时试听文件

        ‘内网,根据IP可以知道是哪个同事
	function getUserName()
		getUserName = request.servervariables("REMOTE_ADDR")
		select case left(getUserName, 8)
			case "10.1.2.1"
				getUserName = "嗷嗷嗷"
			case "10.1.2.2"
				getUserName = "额额额"
			case else
				getUserName = left(getUserName, 7) & "*.*"
		end select
	end function


        ‘音乐文件的绝对路径
	MediaPath = "http://" & request.servervariables("SERVER_NAME") & ":" & request.servervariables("SERVER_PORT") & replace(request.servervariables("SCRIPT_NAME"), "/index.asp", "/")

	target = ""
	if instr(request.servervariables("HTTP_USER_AGENT"), "MSIE ") = 0 then
		target = " target=""_blank"""
	end if

	jumpUrl = ""

	set fso = server.createobject("Scripting.FileSystemObject")
	set mp3 = fso.getfolder(server.mappath("mp3"))
	set m3u = fso.getfolder(server.mappath("m3u"))
	
	musiclist = split(request.form("music"), ",")
	playname = request.form("name")
	
	if request.querystring("act") = "view" or  request.querystring("act") = "save" then
		
		wpl = ""
		wpl = wpl & "<?wpl version=""1.0""?>"
		wpl = wpl & "<smil>"
		wpl = wpl & " <body>"
		wpl = wpl & "  <seq>"
		for each music in musiclist
			wpl = wpl & "   <media src=""" & MediaPath & "mp3/" & trim(music) & ".mp3""/>"
		next
		wpl = wpl & "  </seq>"
		wpl = wpl & " </body>"
		wpl = wpl & "</smil>"
		
		if request.querystring("act") = "view" then
			savePath = "temp/" & getUserName() & cLng(timer()) & ".wpl"
		else
			savePath = "m3u/" & playname & ".wpl"
		end if
		saveFile = server.mappath(savePath)
		set fto = fso.opentextfile(saveFile, 2, true, -1)
		fto.write wpl
		fto.close
		set fto = nothing
		jumpUrl = savePath
	end if
	if playname = "" then playname = getUserName() & "合成_" & cLng(timer())

前端部分,JS实现可以添加音乐,删除音乐,移动音乐片段等,直接上代码。

$(function(){
	var updateTime = function(){
		var time = 0;
		$("input[name=music]").each(function(){
			time += parseInt($(this).attr("rel"))
		});
		var date = new Date(time * 1000);
		$("#time").val(date.getMinutes() + ":" + (date.getSeconds() < 10 ? '0':'') + date.getSeconds());
	}
	var playlist_listener = function(){
		$(".playlist .list-group-item").click(function(){
			$(this).addClass("active").siblings().removeClass("active");
		});
		$(".playlist .glyphicon").unbind('click').click(function(){
			$select = $(this).parent().parent().parent();
			if($(this).hasClass("glyphicon-remove")){
				$select.remove();
				updateTime();
			}else if($(this).hasClass("glyphicon-arrow-up")){
				$select.insertBefore($select.prev());
			}else if($(this).hasClass("glyphicon-arrow-down")){
				$select.insertAfter($select.next());
			}
		});
	}
	var playlist_add = function(name, time){
		var html = '';
		html += '<div class="list-group-item">';
		html += '  <div class="input-group">';
		html += '    <input type="text" rel="' + time + '" name="music" readonly="readonly" class="form-control" value="' + name + '_' + time + '" />';
		html += '    <div class="input-group-addon control-panel">';
		html += '    <span class="glyphicon glyphicon-remove"></span>';
		html += '    <span class="glyphicon glyphicon-arrow-up"></span>';
		html += '    <span class="glyphicon glyphicon-arrow-down"></span>';
		html += '    </div>';
		html += '  </div>';
		html += '</div>';
		$(".playlist").append(html);
	}
	$("div.panel").click(function(){
		$("div.panel").removeClass("panel-warning");
		$(this).addClass("panel-warning");
	});
	$(".music-item").click(function(){
		var data = $(this).data();
		playlist_add(data['name'], data['time']);
		playlist_listener();
		updateTime();
	});
	$("#save,#view").click(function(){
		$("#form").attr("action","?act=" + $(this).attr("id")).submit();
	});

最终的演示地址:http://www.miaoqiyuan.cn/products/music-playlist/
程序打包下载:http://www.miaoqiyuan.cn/products/music-playlist/last.zip

发表评论

电子邮件地址不会被公开。 必填项已用*标注

This site uses Akismet to reduce spam. Learn how your comment data is processed.