search

jessuni / shikwasa

An audio player born for podcast
https://shikwasa.js.org
MIT License
477 stars 31 forks source link

Cannot play podcast in Firefox #18

Closed eatradish closed 4 years ago

eatradish commented 4 years ago

I tried using shikwasa on my blog and found that the podcast cannot be played under Firefox, but it works well on Edge (chromium), I tried on another website that uses shikwasa (https://buzaichang.xyz/episodes/four-women) tried it and found that the problem was also reproduced.

jessuni commented 4 years ago

Do you mean no sound output by 'cannot be played'? I tried the url you provided in Firefox and it plays fine.

eatradish commented 4 years ago

CC, this video to reproduce the problem 2020-06-19 15-31-39.zip

jessuni commented 4 years ago

Thanks. Could you share a bit more about the Firefox version and Shikwasa config? Any error in console?

eatradish commented 4 years ago

Firefox version: 77.0.1 (64bit, Windows 10 2004)

shikwasa config:

<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/shikwasa@2.0.0/dist/shikwasa.min.css">
</head>
<body>
    <script src="https://cdn.jsdelivr.net/npm/shikwasa@2.0.0/dist/shikwasa.min.js"></script>
    <div class="element-of-your-choice">
        <!-- this is where the player will be injected -->
    </div>
    <script>
        const player = new Shikwasa({
            container: () => document.querySelector('.element-of-your-choice'),
            audio: {
                    title: 'Hello World!',
                    artist: 'Shikwasa FM',
                    cover: '/favicon.png',
                    src: '/mp3/1.mp3',
            },
        });
    </script>
</body>
eatradish commented 4 years ago

I seem to see some errors:

媒体资源 http://localhost:4000/mp3/1.mp3 无法被解码。 Podcast-test
媒体资源 http://localhost:4000/mp3/1.mp3 未能解码，错误：Error Code: NS_ERROR_DOM_MEDIA_MEDIASINK_ERR (0x806e000b)
Details: OnMediaSinkAudioError
eatradish commented 4 years ago

Can be reproduced at https://buzaichang.xyz/episodes/four-women :

媒体资源 https://r.typlog.com/eyJzIjo4NjgsImUiOjI0OTAsInAiOjIsInUiOiI…yMY0MbhUaXQs5My6DBbZiHAHro/buzaichang/8407868990_1283045.mp3 无法被解码。 four-women
媒体资源 https://r.typlog.com/eyJzIjo4NjgsImUiOjI0OTAsInAiOjIsInUiOiI…yMY0MbhUaXQs5My6DBbZiHAHro/buzaichang/8407868990_1283045.mp3 未能解码，错误：Error Code: NS_ERROR_DOM_MEDIA_MEDIASINK_ERR (0x806e000b)
Details: OnMediaSinkAudioError
jessuni commented 4 years ago

I tried Firefox 77.0.1 with Windows 10 with no problem, but there must be something wrong. It seems the audio file cannot be properly decoded. Can you remove Shikwasa completely from the code and add an HTML5 audio element with the same audio source?

Something like this:

const audio = new Audio()
document.body.append(audio)
audio.src = '...'
eatradish commented 4 years ago

图片

It seems that setting "严格" to "标准" will solve the problem. Thanks!

jessuni commented 4 years ago

The blockage is likely caused by the media source. Have fun playing with Shikwasa!