Playing Audio in HTML

2020-02-10 14:35发布

站内问答 / 后端开发
1035 4 4

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.

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

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

4条回答
做个烂人
2楼-- · 2020-02-10 15:12

Audio.js looks 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.

查看更多
0人赞 添加讨论(0) 举报
Ridiculous、
3楼-- · 2020-02-10 15:15

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>
查看更多
0人赞 添加讨论(0) 举报
Fickle 薄情
4楼-- · 2020-02-10 15:18

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

<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.

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

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

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 support as of July 2011.

查看更多
0人赞 添加讨论(0) 举报
家丑人穷心不美
5楼-- · 2020-02-10 15:21

Hopefully, in a few years, the HTML5 audio API will 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.

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

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)