jquery移动端音频播放代码

在移动端网站中，音频播放是非常重要的组件之一。而jQuery是一种常用的javascript库，可以简化代码的编写，提高开发效率。接下来，我们将演示如何使用jQuery实现移动端音频播放功能。

第一步是在html文件中添加一个音频元素，如下所示：

<audio id="audio" src="audio.mp3"></audio>

接下来，在JavaScript中编写jQuery代码来控制音频的播放状态。首先，需要获取音频元素：

var audio = $('#audio')[0];

然后，可以通过jQuery获取播放按钮和进度条：

var playBtn = $('#playBtn');
var progressBar = $('#progressBar');

接着，编写播放和暂停按钮的点击事件。当点击播放按钮时，如果音频处于暂停状态，就开始播放音频，并将按钮图标改为“暂停”；否则，暂停音频，并将按钮图标改为“播放”：

playBtn.click(function() {
    if (audio.paused) {
        audio.play();
        playBtn.removeClass('fa-play').addClass('fa-pause')
    } else {
        audio.pause();
        playBtn.removeClass('fa-pause').addClass('fa-play')
    }
});

最后，实现进度条的更新。在每次音频播放时，更新进度条的宽度来展示播放进度：

audio.addEventListener('timeupdate',function() {
    var progress = audio.currentTime / audio.duration * 100;
    progressBar.css('width',progress + '%');
});

至此，使用jQuery实现移动端音频播放功能的代码就完成了。完整代码如下：

<audio id="audio" src="audio.mp3"></audio>
<i id="playBtn" class="fa fa-play"></i>
<div id="progressContainer"><div id="progressBar"></div></div>

var audio = $('#audio')[0];
var playBtn = $('#playBtn');
var progressBar = $('#progressBar');

playBtn.click(function() {
    if (audio.paused) {
        audio.play();
        playBtn.removeClass('fa-play').addClass('fa-pause')
    } else {
        audio.pause();
        playBtn.removeClass('fa-pause').addClass('fa-play')
    }
});

audio.addEventListener('timeupdate',progress + '%');
});