HTML5 音频 - IOS 浏览器不工作答案

【问题标题】：HTML5 Audio - Not working IOS browsersHTML5 音频 - IOS 浏览器不工作
【发布时间】：2015-03-31 14:51:42
【问题描述】：

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

点击“播放”的按钮在 iO 上不可点击。

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

我怎样才能最好地编写一个初始化方法，以便音频可以在 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';
    }
};

【问题讨论】：

标签： javascript ios html audio mobile

【解决方案1】：

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

【讨论】：