我有一个存储在 AWS S3 中的音乐轨道列表。
使用 Javascript 和 HTML5,我可以在桌面和 Android 上的浏览器中播放音轨。
单击“播放”的按钮在 iO 上不可单击。
我知道用户需要启动“播放”。所以我在点击 Logo 时添加了一个“加载”事件,但它仍然没有给我任何东西..
我怎样才能最好地编写一个初始化方法,以便音频可以在 iO 上播放???
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';
}
};
最佳答案
你是说按钮在本地工作吗?如果是这样,我自己也有这个问题。在将代码上传到 iOS 时,您是否在任何时候更改过代码中任何位置的任何 .mp3 文件名?如果您在任何时候上传了两个不同的文件名,它似乎会感到困惑。将所有内容更改为完全不同的文件名并再次上传。为我工作。
关于javascript - HTML5 音频 - IOS 浏览器不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29371619/