HTML5 Audioplayer无法正常工作

时间:2018-08-27 10:15:40

标签: javascript html5-audio

在将其弄乱了将近三个小时之后,我正在尝试使该音频播放器在Wayback机器上正常运行,完全没有运气。

这是我认为的音频播放器的Javascript。

mejs.mepIndex = 0, mejs.players = {}, mejs.MediaElementPlayer = function(b, c) {
    return this instanceof mejs.MediaElementPlayer ? (this.$media = this.$node = a(b), this.node = this.media = this.$media[0], "undefined" != typeof this.node.player ? this.node
        .player : (this.node.player = this, "undefined" == typeof c && (c = this.$node.data("mejsoptions")), this.options = a.extend({}, mejs.MepDefaults, c), this.id =
            "mep_" + mejs.mepIndex++, mejs.players[this.id] = this, this.init(), this)) : new mejs.MediaElementPlayer(b, c)
}, mejs.MediaElementPlayer.prototype = {
    hasFocus: !1,
    controlsAreVisible: !0,
    init: function() {
        var b = this,
            c = mejs.MediaFeatures,
            d = a.extend(!0, {}, b.options, {
                success: function(a, c) {
                    b.meReady(a, c)
                },
                error: function(a) {
                    b.handleError(a)
                }
            }),
            e = b.media.tagName.toLowerCase();
        b.isDynamic = "audio" !== e && "video" !== e, b.isVideo = b.isDynamic ? b.options.isVideo : "audio" !== e && b.options.isVideo, c.isiPad && b.options.iPadUseNativeControls ||
            c.isiPhone && b.options.iPhoneUseNativeControls ? (b.$media.attr("controls", "controls"), c.isiPad && null !== b.media.getAttribute("autoplay") && b.play()) :
            c.isAndroid && b.options.AndroidUseNativeControls || (b.$media.removeAttr("controls"), b.container = a('<div id="' + b.id + '" class="mejs-container ' + (mejs.MediaFeatures
                        .svg ? "svg" : "no-svg") +
                    '"><div class="mejs-inner"><div class="mejs-mediaelement"></div><div class="mejs-layers"></div><div class="mejs-controls"></div><div class="mejs-clear"></div></div></div>'
                ).addClass(b.$media[0].className).insertBefore(b.$media), b.container.addClass((c.isAndroid ? "mejs-android " : "") + (c.isiOS ? "mejs-ios " : "") + (c.isiPad ?
                    "mejs-ipad " : "") + (c.isiPhone ? "mejs-iphone " : "") + (b.isVideo ? "mejs-video " : "mejs-audio ")), c.isiOS ? (c = b.$media.clone(), b.container.find(
                    ".mejs-mediaelement").append(c), b.$media.remove(), b.$node = b.$media = c, b.node = b.media = c[0]) : b.container.find(".mejs-mediaelement").append(b.$media),
                b.controls = b.container.find(".mejs-controls"), b.layers = b.container.find(".mejs-layers"), c = b.isVideo ? "video" : "audio", e = c.substring(0, 1).toUpperCase() +
                c.substring(1), b.width = b.options[c + "Width"] > 0 || b.options[c + "Width"].toString().indexOf("%") > -1 ? b.options[c + "Width"] : "" !== b.media.style
                .width && null !== b.media.style.width ? b.media.style.width : null !== b.media.getAttribute("width") ? b.$media.attr("width") : b.options["default" + e +
                    "Width"], b.height = b.options[c + "Height"] > 0 || b.options[c + "Height"].toString().indexOf("%") > -1 ? b.options[c + "Height"] : "" !== b.media.style
                .height && null !== b.media.style.height ? b.media.style.height : null !== b.$media[0].getAttribute("height") ? b.$media.attr("height") : b.options[
                    "default" + e + "Height"], b.setPlayerSize(b.width, b.height), d.pluginWidth = b.width, d.pluginHeight = b.height), mejs.MediaElement(b.$media[0], d),
            "undefined" != typeof b.container && b.controlsAreVisible && b.container.trigger("controlsshown")
    },

这是音频播放器的HTML代码,我已经尝试过尝试使用javascript的每种组合,以使其正常工作。

<section class="section with-player">
    <header>
        <h1>Now Playing: <span id="playerInfo">SONG NAME</span></h1>
    </header><span data-next="javascript: void()" data-prev="javascript: void()" id="links"></span>
    <div id="fromAlbum">
        <div class="mejs-container svg mejs-audio" id="mep_0" style="width: 100%; height: 50px;">
            <div class="mejs-inner">
                <div class="mejs-mediaelement">
                    <audio id="mejs" preload="none" src=""></audio>
                </div>
                <div class="mejs-layers">
                    <div class="mejs-poster mejs-layer" style="display: none; width: 100%; height: 50px;"></div>
                </div>
                <div class="mejs-controls">
                    <div class="mejs-time-rail" style="width: 2px;">
                        <span class="mejs-time-total" style="width: 1px;"><span class="mejs-time-buffering" style="display: none;"></span><span class=
                        "mejs-time-loaded"></span><span class="mejs-time-current"></span><span class="mejs-time-handle"></span><span class="mejs-time-float"><span class=
                        "mejs-time-float-current">00:00</span><span class="mejs-time-float-corner"></span></span></span>
                    </div>
                    <div class="mejs-button mejs-prevtrack hide-for-small">
                        <a class="" href="javascript:%20void()"><i class="glyphicon glyphicon-backward"></i></a>
                    </div>
                    <div class="mejs-button mejs-playpause-button mejs-play">
                        <button aria-controls="mep_0" aria-label="Play/Pause" class="btn btn-link" title="Play/Pause" type="button"><i class=
                        "glyphicon glyphicon-play"></i></button>
                    </div>
                    <div class="mejs-button mejs-nexttrack hide-for-small">
                        <a class="" href="javascript:%20void()"><i class="glyphicon glyphicon-forward"></i></a>
                    </div>
                    <div class="mejs-button mejs-volume-button mejs-mute">
                        <button aria-controls="mep_0" aria-label="Mute Toggle" title="Mute Toggle" type="button"></button>
                    </div>
                    <div class="mejs-horizontal-volume-slider mejs-mute">
                        <div class="mejs-horizontal-volume-total"></div>
                        <div class="mejs-horizontal-volume-current" style="width: 29px;"></div>
                        <div class="mejs-horizontal-volume-handle" style="left: 23px;"></div>
                    </div>
                    <div class="mejs-time">
                        <span class="mejs-currenttime">00:00</span> <span>/</span> <span class="mejs-duration">00:00</span>
                    </div>
                </div>
                <div class="mejs-clear"></div>
            </div>
        </div>
    </div>
    <div class="mejs-list">
        <ol>
          <li>
            <span>TTG (feat. Kevin Gates)</span> <a class="btn btn-dark btn-xs" href=
            "https://web.archive.org/web/20161017173851/http://www.albumkings.com/albums/71500-woptober-by-gucci-mane/intro-fuck-12"><i class=
            "glyphicon glyphicon-download-alt"></i> download</a> <a class="btn btn-dark btn-xs tracklist-play" data-file="http://filecandy.net/mp3embed-t7yjo5m8jey6.mp3" href=
            "<?php the_permalink(); ?>#"><i class="glyphicon glyphicon-play"></i> play</a>
          </li>
          <li>
            <span>I Am Who They Say I Am (feat. Kevin Gates and Quando Rondo)</span> <a class="btn btn-dark btn-xs" href=
            "https://web.archive.org/web/20161017173851/http://www.albumkings.com/albums/71500-woptober-by-gucci-mane/aggressive"><i class=
            "glyphicon glyphicon-download-alt"></i> download</a> <a class="btn btn-dark btn-xs tracklist-play" data-file="http://filecandy.net/mp3embed-v8sfz29sx5du.mp3" href=
            "<?php the_permalink(); ?>#"><i class="glyphicon glyphicon-play"></i> play</a>
        </ol>
    </div>
</section>

链接到Wayback Machine

我已经在上面的循环中添加了工作文件链接,但是仅从Wayback复制代码后,我无法获得顶部来显示当前播放的歌曲。包含javascript的文件是all.min.js

0 个答案:

没有答案