lundi 2 mars 2015

Html5 audio not displaying in iOS app simulator

I built an html5 audio playlist that I used from this site:

http://ift.tt/1nWkCUF


I'm using Meteor.js for my build and using bootstrap to display the list.


Everything works completely fine in the browser but when I'm using the iOS simulator even though my sound works I am unable to see my html5 audio player. Also, my playlist will only skip from the first to the second song and just repeats the second track after that.


Here's my code:





Template.video.rendered = function(){
var audio;
var playlist;
var tracks;
var current;

init();
function init(){
current = 0;
audio = $('audio');
playlist = $('#playlist');
tracks = playlist.find('li a');
len = tracks.length - 1;
audio[0].volume = .5;
playlist.find('a').click(function(e){
e.preventDefault();
link = $(this);
current = link.parent().index();
run(link, audio[0]);
});
audio[0].addEventListener('ended',function(e){
current++;
if (current == len){
current = 0;
link = playlist.find('a')[0];
}else{
link = playlist.find('a')[current];
}
run($(link),audio[0]);
});
}

function run(link,player){
player.src = link.attr('href');
par = link.parent();
par.addClass('active').siblings().removeClass('active');
audio[0].load();
audio[0].play();
}
}



#playlist,audio{background:#666;width:362px;padding:20px;}
.active a{color:#5DB0E6;text-decoration:none;}
li a{color:#eeeedd;background:#333;padding:5px;display:block;}
li a:hover{text-decoration:none;
}



<audio controls id="audio" preload="auto" tabindex="0" type="audio/mpeg">
<source type="audio/mpeg" src="JCole-WarmUp/GrownSimba.mp3">
Sorry, your browser does not support HTML5 audio.
</audio>

<ul class="list-group" id="playlist">
<li class="list-group-item"><a href="http://ift.tt/1kqc8GI">song</a></li>
<li class="list-group-item"><a href="http://ift.tt/1jLB5JV">song</a></li>
<li class="list-group-item"><a href="http://ift.tt/1jLB5JT">song</a></li>



</ul>



I'm wondering if iOS limitations are just too high or if this is a problem with Meteor.


Thanks


Aucun commentaire:

Enregistrer un commentaire