Safari的HTML5音频标签非常怪异

时间:2019-02-13 07:56:59

标签: javascript html5 html5-audio web-audio-api

我正在建立一个网站,其中有一个HTML5音频元素,在其中我可以使用javascript根据用户单击的曲目来动态更新源。它由网络音频API封装,该API会执行fft并使用它来控制三个js中的场景。

该网站可以在chrome和firefox中正常运行,但是在野生动物园中,音频存在很大问题。

第一个问题是,如果您动态更新safari,则safari不会将source作为音频的子节点,因此必须在音频标签中放入src。我在js中检查safari / IOS,然后根据结果设置opus或mp3音频源。我尝试使用m4a作为文件格式,但是即使浏览器支持m4a,它也无法播放?

持续存在的问题是:

.pause()方法不适用于音频元素,它只是在用户恢复播放时从音轨的开头再次播放。

尝试将.currentTime设置为允许用户跳过音轨在safari中没有任何作用。但是,它正在读取currentTime作为设置播放头的位置。

当animate()函数(通过requestAnimationFrame递归调用)运行时,在开始播放任何东西之前,它非常缓慢,经过一分钟的延迟,与ios上一样,但并不严重,并且ios不会遇到其他问题

场景中的多边形数大约为250k,这非常高,但是,尽管在requestAnimationFrame没有运行的情况下,尽管音频存在其他问题,但如果画布上的多边形数使音频播放速度变慢,这将很奇怪。 / p>

不好意思,我没有太多时间来写这个:

const playTrack = (trackNumber) => {
    audio.src = `assets/audio/${trackNumber}.${fileType}`;
    audio.load();
    audio.play();
};

audio.ontimeupdate = () => {
    const left = audio.currentTime * segment;
    playHead.style.width = `${left}px`;
};

playbar.addEventListener("click", (e) => {
    const pos = e.x - container.left;
    audio.currentTime =  pos / segment;
}, false);

    tracks.forEach(track => {
    track.addEventListener("click", (e) => {
        e.preventDefault();

        //pause or load
        if (!audio.paused && nowPlaying === track) {
            //pause track
            audio.pause();
            track.children[0].classList.remove('fa-pause');
            track.children[0].classList.add('fa-play');
        } else if (audio.paused && nowPlaying === track) {
            //play track
            audio.play();
            track.children[0].classList.remove('fa-play');
            track.children[0].classList.add('fa-pause');
        } else {
            //load and play track
            instructions.style.display = "none";
            trackNumber = parseInt(track.getAttribute('data-value'), 10);
            playTrack(trackNumber);
            nowPlaying = track;

            iconFlick(track);
        }

        trackDuration = duration[trackNumber];
        segment = width / trackDuration;

        if (clickFirst === 0) {
            clickFirst = 10;
            setupNodes(audio)
        }

        trackGlobal = track;
    });

const setupNodes = (audio) => {
    const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
    const source = audioCtx.createMediaElementSource(audio);

    analyser = audioCtx.createAnalyser();
    source.connect(analyser);

    analyser.fftSize = 256;
    bufferLength = analyser.frequencyBinCount;
    dataArray = new Uint8Array(bufferLength);

    audioBegin = 1;

    analyser.connect(audioCtx.destination);
};

我要建立的网站在这里,包含完整的源代码: https://www.missed.flights/

请让我知道是否发现任何东西,这让我感到难过。

1 个答案:

答案 0 :(得分:0)

如果不使用<audio>标签,则可能会获得更好的运气和更多的控制权。如果需要这些控件,则需要制作自己的播放按钮和滑块。并单独使用Web Audio API来下载,解码和播放曲目。

var url = "whatever.mp3";
var source = audioCtx.createBufferSource();
var buffers = {};

var request = new XMLHttpRequest();
request.open('GET', url, true);
request.responseType = 'arraybuffer';

request.onload = function () {
    audioCtx.decodeAudioData(request.response, function (buffer) {
        source.buffer = buffer;
        source.connect(audioCtx.destination);
        source.start(audioCtx.currentTime);

        // save this for later, so you can replay it without downloading
        buffers[url] = buffer; 

    }, function () {
        console.warn("error loading sound url: " + url);
    });
}
request.send();