以 HTML 格式播放音频

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/8641355/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 12:11:04  来源:igfitidea点击:

Playing Audio in HTML

htmlaudioplayback

提问by Sohail

I want to play a mp3 audio file in HTML. I don't want to display the whole player with controls like Volume etc. I just need a play/pause button, Designed by me, not the core design of some player, like yahoo player, or google one.

我想以 HTML 格式播放 mp3 音频文件。我不想用音量等控件显示整个播放器。我只需要一个播放/暂停按钮,由我设计,而不是某些播放器的核心设计,如雅虎播放器或谷歌播放器。

For example the audio will be autoplay. When a button (probably an image) is clicked it will pause, and when that image is clicked again, the audio will play again.

例如,音频将自动播放。单击按钮(可能是图像)时,它将暂停,再次单击该图像时,音频将再次播放。

There are quite few examples here : http://www.w3schools.com/html/html_sounds.asp

这里的例子很少:http: //www.w3schools.com/html/html_sounds.asp

Can I control any of them to play/stop from JS code ?

我可以控制它们中的任何一个从 JS 代码播放/停止吗?

回答by mrtsherman

You can use the html5 audio tag. You can specify your own controls for playback.

您可以使用 html5音频标签。您可以指定自己的播放控件。

<audio preload="auto" autobuffer> 
  <source src="elvis.mp3" />
  <source src="elvis.wav" /> <!-- fallback if no mp3 support in browser -->
</audio>

This is a jQuery solution.

这是一个 jQuery 解决方案。

http://jsfiddle.net/QPW27/109/

http://jsfiddle.net/QPW27/109/

This is what your non-jQuery solution would look like.

这就是您的非 jQuery 解决方案的样子。

var foo = document.getElementById('player');
foo.pause();  //just bind play/pause to some onclick events on your page
foo.play();

Different browsers support different audio formats. You can specify fallback audio versions though. This website has a nice chart of browser supportas of July 2011.

不同的浏览器支持不同的音频格式。不过,您可以指定后备音频版本。截至 2011 年 7 月,该网站有一个很好的浏览器支持图表

回答by Peter Olson

Hopefully, in a few years, the HTML5 audio APIwill be supported accross more browsers, but currently, playing sounds requires either a lot of browser-specific hacks to get things working, or reliance on a browser plugin like flash.

希望在几年内,HTML5 音频 API将被更多浏览器支持,但目前,播放声音需要大量特定于浏览器的 hack 才能使事情正常工作,或者依赖于浏览器插件(如 Flash)。

In the meantime, I reccomend using SoundManager2. It's fairly easy to work with and will involve much less headache than doing it yourself.

同时,我建议使用SoundManager2。使用它相当容易,并且比自己动手更不麻烦。

回答by Aaron

Audio.jslooks like it has the player styling features you're looking for, with a graceful degradation to Flash if the browser doesn't support the new audio API.

Audio.js看起来像您正在寻找的播放器样式功能,如果浏览器不支持新的音频 API,它会优雅地降级为 Flash。

回答by chandru

You can play audio by using embed tag

您可以使用嵌入标签播放音频

<!DOCTYPE html>
<html>
<body>

<p><a href="horse.mp3">Play mp3</a></p>
<p><a href="liar.wav">Play wav</a></p>

<script src="http://mediaplayer.yahoo.com/js"></script>

</body>
</html>