jquery控制audio的播放

JS 同时被 2 个专栏收录
113 篇文章 0 订阅
96 篇文章 0 订阅

 jquery实现

<button onclick="playMusic()">播放<button>
<audio id="player" controls="controls" autoplay">
   <source src="../webmusicpages/music/1.mp3"/>
</audio>
<script>
   function playMusic() {
        var player = $("#player")[0]; /*jquery对象转换成js对象*/
        if (player.paused){ /*如果已经暂停*/
            player.play(); /*播放*/
        }else {
            player.pause();/*暂停*/
        }
    }
</script>

JavaScript实现

<button onclick="playMusic()">播放<button>
<audio id="player" controls="controls" autoplay">
   <source src="../webmusicpages/music/1.mp3"/>
</audio>
<script>
   function playMusic() {
        var player = document.getElementById("player");  

        if (player.paused){ /*如果已经暂停*/
            player.play(); /*播放*/
        }else {
            player.pause();/*暂停*/
        }
    }
</script>

 


Audio 对象属性

属性描述
audioTracks返回表示可用音频轨道的 AudioTrackList 对象。
autoplay设置或返回是否在就绪(加载完成)后随即播放音频。
buffered返回表示音频已缓冲部分的 TimeRanges 对象。
controller返回表示音频当前媒体控制器的 MediaController 对象。
controls设置或返回音频是否应该显示控件(比如播放/暂停等)。
crossOrigin设置或返回音频的 CORS 设置。
currentSrc返回当前音频的 URL。
currentTime设置或返回音频中的当前播放位置(以秒计)。
defaultMuted设置或返回音频默认是否静音。
defaultPlaybackRate设置或返回音频的默认播放速度。
duration返回音频的长度(以秒计)。
ended返回音频的播放是否已结束。
error返回表示音频错误状态的 MediaError 对象。
loop设置或返回音频是否应在结束时再次播放。
mediaGroup设置或返回音频所属媒介组合的名称。
muted设置或返回是否关闭声音。
networkState返回音频的当前网络状态。
paused设置或返回音频是否暂停。
playbackRate设置或返回音频播放的速度。
played返回表示音频已播放部分的 TimeRanges 对象。
preload设置或返回音频的 preload 属性的值。
readyState返回音频当前的就绪状态。
seekable返回表示音频可寻址部分的 TimeRanges 对象。
seeking返回用户当前是否正在音频中进行查找。
src设置或返回音频的 src 属性的值。
textTracks返回表示可用文本轨道的 TextTrackList 对象。
volume设置或返回音频的音量。

 


Audio 对象方法

方法描述
addTextTrack()向音频添加新的文本轨道。
canPlayType()检查浏览器是否能够播放指定的音频类型。
fastSeek()在音频播放器中指定播放时间。
getStartDate()返回新的 Date 对象,表示当前时间线偏移量。
load()重新加载音频元素。
play()开始播放音频。
pause()暂停当前播放的音频。

 


转载:

HTML DOM Audio 对象

https://www.w3school.com.cn/jsref/dom_obj_audio.asp

jquery实现audio的播放控制

https://blog.csdn.net/EndisenChen/article/details/70213336

  • 0
    点赞
  • 0
    评论
  • 1
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值