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瀏覽器

回答

相關問題