网页播放音频的3种方法

第一种:HTML标签播放

<p><a href="来生缘.mp3">播放 mp3</a></p>
<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>

第二种:HTML标签播放

<audio controls="controls">
      <source src="来生缘.mp3" type="audio/mpeg">
      <embed height="100" width="100" src="来生缘.mp3" />
</audio>

第三种:采用js播放

 <script>
        var audioDom = new Audio("来生缘.mp3");
        $('.excel_mark_wrap').prepend('<button class="startBtn" οnclick="start()">开始播放</button>'); 
        function start(){
		    audioDom.play();
	    }
 </script>
  • 3
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
常见的网页音频播放方式有两:使用HTML5的audio标签和使用JavaScript控制音频播放。 使用HTML5的audio标签的代码如下: ``` <audio src="audio.mp3" controls></audio> ``` 其中,`src`属性指定音频文件的路径,`controls`属性表示显示音频控制条。 使用JavaScript控制音频播放的代码如下: ``` var audio = new Audio('audio.mp3'); audio.play(); ``` 其中,`Audio`对象表示一个音频,`play()`方法表示播放音频。 为了更好地封装音频播放,可以定义一个`AudioPlayer`对象,它提供了`play()`、`pause()`、`stop()`等方法,以及`onplay`、`onpause`、`onstop`等事件。 ``` function AudioPlayer(src) { this.audio = new Audio(src); this.audio.addEventListener('ended', function() { this.dispatchEvent(new Event('stop')); }.bind(this)); } AudioPlayer.prototype.play = function() { this.audio.play(); this.dispatchEvent(new Event('play')); }; AudioPlayer.prototype.pause = function() { this.audio.pause(); this.dispatchEvent(new Event('pause')); }; AudioPlayer.prototype.stop = function() { this.audio.pause(); this.audio.currentTime = 0; this.dispatchEvent(new Event('stop')); }; AudioPlayer.prototype.addEventListener = function(type, listener) { this.audio.addEventListener(type, listener); }; AudioPlayer.prototype.dispatchEvent = function(event) { this.audio.dispatchEvent(event); }; ``` 使用`AudioPlayer`对象的代码如下: ``` var player = new AudioPlayer('audio.mp3'); player.addEventListener('play', function() { console.log('play'); }); player.addEventListener('pause', function() { console.log('pause'); }); player.addEventListener('stop', function() { console.log('stop'); }); player.play(); player.pause(); player.stop(); ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值