HTML5音频 - 不工作IOS浏览器

我有音乐曲目，这是存储在AWS S3的列表。使用Javascript和HTML5我可以在桌面和Android浏览器中播放音轨。HTML5音频 - 不工作IOS浏览器

的按钮，点击“播放”是不是在iOS上点击。

我知道用户需要发起“播放”。所以我添加上的标识的点击一个“负荷”事件，但它仍然没有给我什么..

我怎样才能最好写一个INITIALISE方法，以便音频可以在iOS上玩???

HTML

<div id="logo" onclick="loadTracks();"> 
</div> 

<ul id="list"> 
       <% @track_keys.each.with_index do |track, index| %> 
         <li class="track-list"> 
          <audio preload="auto" type="audio/mp4" class="<%= track %>" onended="startNext(<%= index %>);" id="audiosrc"> 
           <source src="https://s3.amazonaws.com/yo-man/<%= track %>" type="audio/mpeg"> 
          </audio> 
          <div class="playButton name" onclick="playTune(<%= index %>);" id="<%= track %>"><%= track %></div> 
          <div class="pauseButton name" onclick="hitPause(<%= index %>);" id="Paused<%= track %>"><%= track %></div> 
         </li> 
        <% end %> 
       </ul>

JAVASCRIPT

$(document).ready(function() { 

    $("audio").on("play", function() { 
     var _this = $(this); 
     var pauseButton = $('.pauseButton'); 
     $("audio").each(function(i,el) { 
     if(!$(el).is(_this)) 
     $(el).get(0).pause(); 
     }); 
    }); 

}); 

var tracks = document.getElementsByTagName('audio'); 
var trackArray = Array.prototype.slice.call(tracks); 

var startNext = function(position) { 
    //check in here if this is last track 
    //if it is, loop back to start 
    trackArray[position + 1].play(); 
}; 

var spinner = function() { 
    $('.sk-spinner-wandering-cubes').show(); 
    $('.artist').css("opacity", ".5"); 
}; 

function isPlaying() { 
    for (i = 0; i < trackArray.length; i++) { 
     if (trackArray[i].paused) { 
      stylePaused(trackArray[i]); 
     }; 
    }; 
}; 

function loadTracks() { 
    for (i = 0; i < tracks.length; i++) { 
     tracks[0].load(); 
     tracks[0].onloadeddata = function() { 
      alert("loaded track"); 
     }; 
    }; 
}; 

function whenPlaying(position) { 
    var track = trackArray[position]; 
    var play = track.className; 
    var pause = 'Paused' + play; 
    var element = document.getElementById(play); 
    var otherElement = document.getElementById(pause); 
    track.onplaying = function() { 
     element.style.display = 'none'; 
     otherElement.style.display = 'inline-block'; 
     isPlaying(); 
    }; 
}; 

function playTune(position) { 
    var track = trackArray[position]; 
    track.play(); 
    whenPlaying(position); 
}; 

function hitPause(position) { 
    var track = trackArray[position]; 
    track.pause(); 
    stylePaused(track); 
}; 

function stylePaused(track) { 
    var play = track.className; 
    var pause = 'Paused' + play; 
    var element = document.getElementById(play); 
    var otherElement = document.getElementById(pause); 
    if (track.paused) { 
     otherElement.style.display = 'none'; 
     element.style.display = 'inline-block'; 
    } 
};

来源

2015-03-31 clare trembath

你说的按钮本地工作？如果是的话，我自己也有这个问题。你有没有在你的代码在任何时候任何地点任何改变.MP3文件名的名字，而你已经上传到iOS的？如果您在任何时候上传了两个不同的文件名，它似乎会感到困惑。将所有内容更改为完全不同的文件名并重新上传。为我工作。

来源

2015-03-31 15:22:06

HTML5音频 - 不工作IOS浏览器

回答

相关问题