39,084
社区成员
发帖
与我相关
我的任务
分享用audio做的手机播放器在安卓设备上不能播放，但是苹果的可以，着急求解，先谢谢各位了！！，
/********************html5 audio 实例 start **********************/
//网络资源： http://www.xuanfengge.com/html5-object-video-using-javascript-to-control-audio.html
/*判断访问终端*/
var browser={
versions:function(){
var u = navigator.userAgent, app = navigator.appVersion;
return {
ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), /*ios终端*/
android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1 /*android终端或者uc浏览器*/
};
}()
};
var myAudio = document.getElementById("myAudio"),
playBtn = $("#playBtn"),//播放暂停按钮
playBtn1 = $("#playBtn1"),//旋转的专辑图片中间的播放暂停按钮
playName = $(".songname"),//显示正在播放的歌名的盒子
nowPlayName = "",
nowImg = $("#nowImg"),//旋转的专辑图片
progressBar = document.getElementById("progress"),//进度条
progressPoint = $(".btnjdd")[0],//进度点
oldDeg=0,//专辑图片的旋转角度
timer=null,//专辑图片旋转的计时器
nowMisInd = 0,//当前播放的单曲位于列表的位置
nowMisId = "";//当前播放歌曲的ID
/* 1. 播放/暂停按钮 点击 */
function playOrPause(){
//点击后播放
if(myAudio.paused){
myAudio.play();
playBtn.attr("class","btnbf");
playBtn1.removeClass("on");
imgRotate();
}
//点击后暂停
else{
myAudio.pause();
playBtn.attr("class","btnzt");
playBtn1.addClass("on");
clearInterval(timer);
}
}
/* 2. 播放 具体某一首歌*/
function toPlay(obj){
if(typeof obj == "string"){/*点击 上一曲/下一曲*/
$("[audio-src]").each(function(index, element) {
//判断当前播放的是哪首歌
if($(this).attr("audio-src") == nowMisId){
nowMisInd = index;
}
});
if(obj=="prev"){
nowMisInd --;
}
else{
nowMisInd ++;
}
var nowMisTotal = $("[audio-src]").length;
if(nowMisInd<0){
nowMisInd = nowMisTotal-1;//如果序号小于0就从最后一首开始放
}
else if(nowMisInd>=nowMisTotal){
nowMisInd = 0;
}
}
else{/* 点击音乐列表区域的 某首歌 */
if($(obj).parent().attr("audio-src") == nowMisId){
/* 若当前播放的歌曲正是 被点击的列表中的 歌曲*/
if(!myAudio.paused){/*若播放则暂停*/
myAudio.pause();
playBtn.attr("class","btnzt");
playBtn1.addClass("on");
clearInterval(timer);
}
else{/*若暂停则播放*/
myAudio.play();
playBtn.attr("class","btnbf");
playBtn1.removeClass("on");
imgRotate();
}
return ;
}
else{
nowMisId = $(obj).parent().attr("audio-src");
$("[audio-src]").each(function(index, element) {
if($(this).attr("audio-src") == nowMisId){
nowMisInd = index;//判断点击的歌曲的索引号
}
});
}
}
resetPlayer("play");
}
/* 3. 重置播放器 */
function resetPlayer(sts){
/*去掉上一个歌曲的在列表里的标记*/
$("[audio-src]").find("em").removeClass("on");
//给当前播放的歌曲在列表里加上标记
var targetMusic = $("[audio-src]").eq(nowMisInd);
nowMisId = targetMusic.attr("audio-src");
targetMusic.find("em").addClass("on");
myAudio.pause();
progressBar.style.width="0px";
progressPoint.style.left="0";
var doReset = function(){
$(myAudio).find("source").attr("src",misSrc);
myAudio.load();
//放在手机上显示时歌手名字基本被挡住，歌曲名字有的会被挡住
nowPlayName = "《"+targetMusic.find("i.name").text()+"》 - "+targetMusic.find("i.desc").text();
initRollWord();
if(urlParams.cmd != "502"){
nowImg.attr("src",targetMusic.find("img").attr("src"));
}
else{
nowImg.attr("src",$(".person_songinfo").find("img").attr("src"));
}
if(sts=="play"){
clearInterval(timer);
oldDeg=0;
imgRotate();
myAudio.play();
playBtn.attr("class","btnbf");
playBtn1.removeClass("on");
}
}
var misSrc = "";
$.ajax({
url : preUrl.replace("person","play")+"?dq_id="+nowMisId,
dataType:"json",
success: function(d){
misSrc = d.url.replace(".dm3",".mp3");
doReset();
},
error:function(){
doReset();
}
});
}
/* 4. 给audio添加 播放音乐时间改变的监听 改变进度条长度 */
addEvent(myAudio,"timeupdate",function(){
//如果获取到进入if函数体里，如果无法获取，返回NaN
if(!isNaN(myAudio.duration)){//myAudio.duration当前音频的长度
var proBoxL = parseInt($(".person_musicjdt").width()-10);
if(myAudio.currentTime != myAudio.duration){
var nowTimePoint = myAudio.currentTime/myAudio.duration * proBoxL;
progressBar.style.width = nowTimePoint +"px";
progressPoint.style.left = nowTimePoint +"px";
}
else{
//如果播放完了就播放下一首
toPlay("next");
}
}
});
/* 5. 用户离开页面时 停止播放音乐 */
window.onblur=function(){
//myAudio.pause();
//playBtn.attr("class","btnzt");
//playBtn1.addClass("on");
//clearInterval(timer);
};
/* 6. 用户回到页面时 开始播放音乐 */
window.onfocus=function(){
if(myAudio.paused && myAudio.currentTime!=0){
//myAudio.play();
//playBtn.attr("class","btnbf");
//playBtn1.removeClass("on");
//imgRotate();
}
}
/* 7. 单曲和专辑 标签页切换 */
var targetBlock = "单曲",
topUrl = window.location.href,
urlParams = urlParamToObj(topUrl),
preUrl = topUrl.substring(0,topUrl.indexOf("?"));
function toggleBlock(obj){
var nowNav = $(obj);
if(targetBlock != nowNav.text() && !loadIng){
nowNav.siblings().removeClass("on");
nowNav.addClass("on")
targetBlock = nowNav.text();
$("[block-name]").hide();
$("[block-name='"+targetBlock+"']").show();
if(targetBlock == "单曲"){
initRollWord();
}
else{
clearInterval(rollWordTimer);
var zjUl = $("[block-name='专辑'] ul");
/*首次切换 时 将第一页专辑 列表 从后台获取过来 显示在页面*/
if($.trim(zjUl.html()) == ""){
var showZj = function(flag){
if(flag == "no"){
zjUl.css({"height":"300px","width":"100%","line-height":"300px","text-align":"center"});
zjUl.html("暂未找到结果");
}
else{
zjUl.html(flag);
zjUl.removeAttr("style");
}
}
$.ajax({
url : preUrl+'?srp_id='+urlParams.srp_id+'&cmd=501&page=1',
dataType:"html",
success: function(d){
if($.trim(d) != ""){showZj(d);}
else{showZj("no");}
},
error:function(){
showZj("no");
}
});
}
}
if(!myAudio.paused){/*若播放则暂停*/
myAudio.pause();
playBtn.attr("class","btnzt");
playBtn1.addClass("on");
clearInterval(timer);
}
}
}
/* 8. 上滑加载 监听触摸开始 */
var startY = endY = 0,
loadIng = false,
pArr = [1,1],
loadArea=null,
dqHasMore = zjHasMore = true;
addEvent(window,"touchstart",function(e){
startY = e.targetTouches[0].pageY;
});
/* 9. 上滑加载 监听触摸移动 */
addEvent(window,"touchmove",function(e){
endY = e.touches[0].pageY;
if(!loadIng && (startY-endY)>10 && urlParams.cmd != "502"){/*502 专辑详情页 是不需要滑动加载的*/
var domH = $(document).height(),
winH = $(window).height(),
scrollTop = $(window).scrollTop();
if(winH+scrollTop>=domH){
loadIng = true;
if((targetBlock=="单曲" && !dqHasMore) || (targetBlock=="专辑" && !zjHasMore)){
loadArea.html('<img src="../image/loading.gif"> 没有更多了......').show();
setTimeout(function(){
loadArea.hide();
loadIng = false;
},1500);
}
else{
loadArea.html('<img src="../image/loading.gif"> 加载中......').show();
getMoreList(targetBlock);
}
}
}
});
...全文
请发表友善的回复…
发表回复
渴望做梦 2015-03-10
- 打赏
- 举报
一次传不了，这是剩余的代码
/* 10. 上滑加载 获取更多单曲或专辑 */
function getMoreList(flag){
var ajaxUrl = preUrl+"?srp_id="+urlParams.srp_id;
if(flag=="单曲"){
ajaxUrl += '&cmd=500&page='+(pArr[0]+1);
}
else{
ajaxUrl += '&cmd=501&page='+(pArr[1]+1);
}
var doDefault = function(sts){
var msg = sts=="ok" ? "加载中" : (sts=="error" ? "服务器响应异常，请稍后再试" : "没有更多了");
setTimeout(function(){
loadArea.html('<img src="../image/loading.gif"> '+msg+'......').show();
setTimeout(function(){
loadArea.hide();
loadIng = false;
},1000);
},1000);
}
$.ajax({
url : ajaxUrl,
type: "post",
dataType:"html",
timeout:5000,
success: function(d){
if($.trim(d) != ""){
$("[block-name='"+flag+"']").find("ul").append(d);
if(flag=="单曲"){pArr[0]++;}
else{pArr[1]++;}
doDefault("ok");
}
else{
if(flag=="单曲"){dqHasMore = false;}
else{zjHasMore = false;}
doDefault("noMore");
}
},
error: function(){
doDefault("error");
}
});
}
/* 11. 初始化 歌名滚动动画 */
var spanW = 0,/*播放器 显示歌名处盒子的宽度*/
labelW = 0,/*歌名的实际宽度*/
rollWordTimer = null;
function initRollWord(){
clearInterval(rollWordTimer);
spanW = playName.parent().width()-50;
playName.css({"width":spanW});
playName.html('<p style="width:auto; margin-left:50px;">'+nowPlayName+'</p>');
labelW = playName.children().width();
rollWordTimer = setInterval(function(){
var targetLeft = parseInt(playName.children().css("margin-left"))-1;
if(targetLeft<-(labelW-50)){
targetLeft = 50;
}
playName.children().css("margin-left",targetLeft);
},40);
}
/* 12. 点击向下的箭头展开内容(专辑详情页) */
function fUnfoldOrFold(obj){
$(obj).toggleClass("on");
$(".person_songci").toggleClass("person_songcion");
}
<!-----------------------辅助函数 开始 ----------------------------->
/* 1. 将URL后面的参数转换成一个对象 */
function urlParamToObj(url){
var reg_url =/^[^\?]+\?([\w\W]+)$/,
reg_para=/([^&=]+)=([\w\W]*?)(&|$)/g, /*g is very important*/
arr_url = reg_url.exec( url ),
ret = {};
if( arr_url && arr_url[1] ){
var str_para = arr_url[1],result;
while((result = reg_para.exec(str_para)) != null){
ret[result[1]] = result[2];
}
}
return ret;
}
/* 2. 给指定dom对象 添加一个 或多个事件监听 */
function addEvent(elm, evType, fn) {
var typeArr = evType.split(' ');
for(var i=0; i<typeArr.length; i++){
if (elm.addEventListener) {
elm.addEventListener(typeArr[i], fn);//DOM2.0
}
else if (elm.attachEvent) {
elm.attachEvent('on' + typeArr[i], fn);//IE5+
}
else {
elm['on' + typeArr[i]] = fn;//DOM 0兼容更老的浏览器
}
}
}
/* 3. 图片旋转动画 (用到css3 2D转换中的旋转 ) */
function imgRotate(){
timer = setInterval(function(){
oldDeg += 2.25;
if(oldDeg>=360){
oldDeg = 0;
}
nowImg.css({"-moz-transform": "rotate("+oldDeg+"deg)","-o-transform": "rotate("+oldDeg+"deg)","-webkit-transform": "rotate("+oldDeg+"deg)","-ms-transform": "rotate("+oldDeg+"deg)","transform": "rotate("+oldDeg+"deg)"});
},50);
}
/* 4.外链跳转 调用搜悦接口 */
function goto_url(url,f){
var flag="original";
if(f) flag = f;
var obj={"category":flag,"url":url};
var str=JSON.stringify(obj);
console.info(str);
if(browser.versions.android){
window.JavascriptInterface.onJSClick(str);
}else if(browser.versions.ios){
window.location.href="souyue.onclick://"+charTranslation(encodeURIComponent(str));
}
}
<!-----------------------辅助函数 结束 ----------------------------->
/* 入口 函数 */
$(function(){
/* 初始化 播放器*/
var playOrPause = "pause";
if(urlParams.dq_id){
nowMisId = urlParams.dq_id;
playOrPause = "play";
}
$("[audio-src]").each(function(index, element) {
if($(this).attr("audio-src") == nowMisId){
nowMisInd = index;//判断点击的歌曲的索引号
}
});
resetPlayer(playOrPause);
loadArea = $(".widget_load");
/*二级页 跳转共用接口 所有外链公用 */
$("a[open-url]").live("click",function(){
goto_url($(this).attr("open-url"),"original");
});
});
/********************html5 audio 实例 end **********************/
业余草 2015-03-10
- 打赏
- 举报
