jquery实现audio的播放控制

实现audio的暂停与播放控制。

<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>
  • 7
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,以下是使用jQuery和HTML5的audio元素来实现钢琴的基本示例。 HTML结构: ```html <div class="piano"> <div class="white-key" data-note="C"></div> <div class="black-key" data-note="C#"></div> <div class="white-key" data-note="D"></div> <div class="black-key" data-note="D#"></div> <!-- 其他键... --> </div> <audio id="piano-audio"></audio> ``` CSS样式: ```css .piano { display: flex; justify-content: center; } .white-key { width: 50px; height: 150px; background-color: white; border: 1px solid black; position: relative; } .black-key { width: 30px; height: 90px; background-color: black; position: absolute; top: 0; left: 25px; z-index: 1; } .black-key:before { content: ""; width: 100%; height: 100%; background-color: black; position: absolute; top: -10px; left: 0; z-index: -1; } .white-key:hover, .black-key:hover { cursor: pointer; background-color: #f5f5f5; } ``` JavaScript代码: ```javascript $(document).ready(function() { $('.piano .white-key, .piano .black-key').mousedown(function() { var note = $(this).data('note'); $('#piano-audio').attr('src', 'audio/' + note + '.mp3')[0].play(); }); }); ``` 在这个示例中,我们使用jQuery的mousedown()方法来为每个键添加鼠标按下事件处理函数。当用户按下钢琴键时,我们将获取该键的音符,并将其与一个audio元素相关联,然后播放音频。 请注意,audio元素的src属性是在用户按下钢琴键时动态更新的,以便与相应的音频文件进行关联。此外,我们还使用了[0]来获取audio元素的DOM对象,因为jQuery的attr()方法不能直接设置HTML5元素的属性。 这只是一个简单的示例,您可以根据自己的需要进行更详细的实现

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值