Javascript HTML5音频-IOS浏览器不工作

我有一个音乐曲目列表，存储在AWS S3中。 使用Javascript和HTML5，我能够在桌面和Android上的浏览器中播放音频曲目

在iOs上无法单击“播放”按钮

我知道用户需要启动“播放”。因此，我在点击徽标时添加了一个“加载”事件，但它仍然没有给我任何东西

我怎样才能最好地编写一个初始化方法，以便音频可以在iOs上播放

HTML

JAVASCRIPT

---

你是说这个按钮在本地工作？如果是这样，我自己也有这个问题。在将.mp3文件上载到iOS时，您是否在任何时候更改了代码中任何.mp3文件名的名称？如果您在任何时候上传了两个不同的文件名，它似乎会混淆。将所有内容更改为完全不同的文件名，然后再次上载。为我工作

<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>

$(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';
    }
};