可以播放 MP3 并显示背景图像的 JavaScript 播放器?

Posted

技术标签:

【中文标题】可以播放 MP3 并显示背景图像的 JavaScript 播放器?【英文标题】:JavaScript player that can play MP3 and show background image? 【发布时间】:2018-05-26 08:20:43 【问题描述】:

我正在开发一个显示音频/视频内容的网站。对于视频,我使用 html5 视频标签。但是,如果是音频,我需要播放音频并在音频播放器中显示图像。是否有任何 html5/javascript 播放器支持在播放音频内容时在播放器中显示图像?

<audio controls>
<source src="http://hcmaslov.d-real.sci-nnov.ru/public/mp3/Cranberries/Cranberries%20'Dreams'.mp3" type="audio/mpeg">
</audio>


<img src="https://upload.wikimedia.org/wikipedia/en/thumb/d/dc/Everybody_else_is_doing_it_so_why_can%27t_we_%28album_cover%29.jpg/220px-Everybody_else_is_doing_it_so_why_can%27t_we_%28album_cover%29.jpg">

【问题讨论】:

【参考方案1】:

&lt;video&gt;&lt;audio&gt; 标签几乎相同,&lt;video&gt; 标签播放音频文件没有问题。使用poster 属性显示图像。

演示

<video controls autoplay poster='https://upload.wikimedia.org/wikipedia/en/thumb/d/dc/Everybody_else_is_doing_it_so_why_can%27t_we_%28album_cover%29.jpg/220px-Everybody_else_is_doing_it_so_why_can%27t_we_%28album_cover%29.jpg'>
<source src="http://home.saske.sk/~slavo/Audio/FOLK/Cranberries/The%20Cranberries%20-%20No%20Need%20To%20Argue/10%20-%20The%20Cranberries%20-%20Dreaming%20My%20Dreams.mp3" type="audio/mpeg">
</video>

【讨论】:

不是在播放mp3 ... 显示mp3的时候可以显示海报吗? 是的,它播放了......谢谢......我现在看到了音频控件......不得不滚动。 好的,太好了,不客气。快乐编码。哦,控制?当用户将鼠标悬停在播放器上时它们会弹出......好吧,我正要重写演示。 :P

以上是关于可以播放 MP3 并显示背景图像的 JavaScript 播放器?的主要内容,如果未能解决你的问题,请参考以下文章

怎样在VC++中实现播放MP3背景音乐

无法将 .mp3 音频文件作为背景音乐播放

最简单的向HTML网页添加背景音乐的方法

如何在波形的特定点播放 mp3?

mp3中的背景音乐和人声分离?用啥软件

用C语言播放mp3格式的音乐