html5 audio在IOS上播放MP3为何只能播放一次


在一个项目中遇到的问题,HTML5 audio播放MP3文件(只有几秒的提示音),在安卓上能正常播放,但在IOS上就只能播放一次,再点击就不会播放了。经测试可能是 currentTime的问题,


 Player = function() {
    "use strict";
    function e(e, t) {
        var n, r, i = !1,
        o = "audio-player";
        if (n = document.createElement("Audio"), n.className = o, n.style.display = "none", t) for (r in t) t.hasOwnProperty(r) && (n[r] = t[r]);
        document.body.appendChild(n),
        this.player = n,
        this.player.src = e,
        this.isplay = i
    }
    return e.prototype = {
        volume: function(e) {
            return e ? this.player.volume = e: this.player.volume
        },
        isPlaying: function() {
            return this.isplay
        },
        play: function() {
            this.isplay = !0,
            this.player.play()
        },
        pause: function() {
            this.isplay = !1,
            this.player.pause()
        },
        toggle: function() {
            this.isplay ? this.pause() : this.play()
        },
        time: function(e) {
            return e ? this.player.currentTime = e: this.player.currentTime
        },
        setTime: function(){
            this.player.currentTime = 0
        },
        totalTime: function() {
            return this.player.duration
        },
        on: function(e, t) {
            var n, r = this,
            i = e.split(/\s+/),
            o = function(e) {
                r.player.ended && "pause" === e.type || t.apply(r, Array.prototype.slice.call(arguments))
            };
            for (n = 0; n < i.length; ++n) i[n] && this.player.addEventListener(i[n], o, !1)
        }
    },e
} ();
$(function() {
    function e(e, t) {
        e.forEach(function(e) {
            // e !== t && (e.isPlaying() && e.pause(), e.append_player && e.append_player.isPlaying && e.append_player.pause())
            e !== t && (e.isPlaying() && e.pause())
        })
    }
    //if (0 === $(".main.thread").length) return ! 1;
    var t = [];
    $(".voice").each(function() {
        var n, r = $(this),
        i = r.data("src"),
        // o = r.data("append-src"),
        s = new Player(i, {
            preload: "none"
        });
        t.push(s),
        // o && (s.append_player = n = new Player(o, {
        // n = new Player(o, {
        //  preload: "none"
        // }), n.on("playing",
        // function() {
        //  r.addClass("play")
        // }), n.on("pause",
        // function() {
        //  r.removeClass("play")
        // }), n.on("ended",
        // function() {
        //  r.removeClass("play"),
        //  s.in_append = !1
        // }),
        s.on("playing",
        function() {
            console.log('playing');
            r.addClass("play")
        }),
        s.on("pause",
        function() {
            console.log('pause');
            r.removeClass("play")
        }),
        s.on("ended",
        function() {
            console.log('end');
            console.log(s.time());
            s.pause();
            // s.time(1);
            s.setTime();
            console.log(s.time());
            console.log(s.isPlaying());
            // s.append_player ? (s.append_player.play(), s.in_append = !0) : r.removeClass("play")
            r.removeClass("play")
        }),
        r.on("click",
        function() {
            console.log('click play');
            // s.isPlaying() || n && n.isPlaying() ? e(t, null) : (n && s.in_append ? n.play() : s.play(), e(t, s));
            s.isPlaying() ? e(t, null) : (s.play(), e(t, s));           
        });
    });
});

这样写在安卓上是可以的,但在IOS上currenttime不会被设置成0. 大家有什么解决方案不。谢谢!

web前端开发 html5 html5-audio JavaScript

十六夜月華 10 years, 4 months ago

网上找了说iOS上每次都新建audio对象,因此用了个办法临时解决了,但其实这种方式在iOS兼听不到playing、ended等事件。


 r.on("click",
    function() {
        if(audioBro.isiPhone()){
    // console.log('isPhone');
    s = new Player(i, {   // 每次新建 player对象
            preload: "none"
        });
    }
        s.isPlaying() ? e(t, null) : (s.play(), e(t, s));           
    });

宮小路瑞惠 answered 10 years, 4 months ago

Your Answer