search

jeffreytse / jekyll-spaceship

🚀 A Jekyll plugin to provide powerful supports for table, mathjax, plantuml, mermaid, emoji, video, audio, youtube, vimeo, dailymotion, soundcloud, spotify, etc.
MIT License
605 stars 63 forks source link

HTML5 audio not supported problem #49

Closed honggaruy closed 3 years ago

honggaruy commented 3 years ago

I tried to embed .wav file from this link

I used the media-processor like as follows ( General Audio Usage)

![ ](https://www.just-great-software.com/special/JanGoyvaerts.wav)

But this is rendered like this and it shows only this message " Your browser doesn't support ...."

<p>
     <audio id="media-JanGoyvaerts.wav" class="media" src="https://www.just-great-software.com/special/JanGoyvaerts.wav" style="max-width: 600px;outline: none"><p> 
        Your browser doesn't support HTML5 audio. Here is a <a href="https://www.just-great-software.com/special/JanGoyvaerts.wav">link to download the audio</a>instead. </p></audio>
</p>

I became curious whether my Chrome browser (89.0.4389.90 , 64bit) really does not support html 5 audio. So I tried the following .md file and it was successful. This shows audio controls and didn't show not support message.

<audio controls>
    <source src="https://www.just-great-software.com/special/JanGoyvaerts.wav">
    Sorry,  but your browser doesn't support audio.
</audio>

Can you tell me why they work differently ?

jeffreytse commented 3 years ago

Hi @honggaruy

Thanks for the reporting and this issue has been address and fixed. Please update your plugin with the repository's master branch.

Thanks and regards

honggaruy commented 3 years ago

Hi @jeffreytse

I updated jekyll-spaceship and I still have problem unfortunately.

I got the following result and this shows audio control and not support message at the same time.

This is the view-source result of my chrome browser. The audio tag is the parent of p tag which has not support text.

<p>
    <audio id="media-JanGoyvaerts.wav" class="media" src="https://www.just-great-software.com/special/JanGoyvaerts.wav" style="max-width: 600px;outline: none" controls="true">
         <p> Your browser doesn't support HTML5 audio. Here is a <a href="https://www.just-great-software.com/special/JanGoyvaerts.wav">link to download the audio</a> instead. 
         </p>
    </audio>
</p>

This is the chrome dev tool's result. Here, the audio tag is the sibling of p tag which has not support text. image

I don't know why they are different but the displayed result is both tags are shown together.

jeffreytse commented 3 years ago

Hi @honggaruy

Thanks for the reporting, please try again with the latest update.

Thanks and regards

honggaruy commented 3 years ago

the latest version working Good!!

Thanks for quick solution !!