html5audiodemo【修复拖动进度条bug】_audio标签实现音乐列表资源-CSDN文库

共6个文件

png：2个

js：2个

html：1个

需积分: 49 98 浏览量 2018-08-08 13:52:39 上传评论收藏 40KB ZIP 举报

HTML5中的`<audio>`元素是网页中播放音频的核心组件，它使得在浏览器中内建音频支持成为可能，无需依赖Flash或其他插件。本示例着重于解决在使用`<audio>`元素时遇到的一个常见问题：用户拖动进度条时出现的bug。此修复方案将确保音频播放流畅且与进度条同步，提升用户体验。我们需要了解`<audio>`的基本结构。一个简单的HTML5音频播放器可以这样编写： ```html <audio id="myAudio" src="audio_file.mp3"></audio> <button onclick="document.getElementById('myAudio').play()">播放</button> <button onclick="document.getElementById('myAudio').pause()">暂停</button> <input type="range" min="0" max="100" value="0" id="slider" onchange="seekAudio()" /> ``` 在上述代码中，`<audio>`元素的`src`属性指向音频文件，`id`属性用于JavaScript操作。两个按钮分别用于播放和暂停音频。`<input type="range">`创建了一个进度条，其`onchange`事件调用`seekAudio()`函数来改变音频播放的位置。为了修复拖动进度条时的bug，我们需要关注`<audio>`元素的`addEventListener`方法，监听`timeupdate`事件。当音频的播放位置发生变化时，这个事件会被触发。同时，我们也需要同步进度条的值： ```javascript document.getElementById('myAudio').addEventListener('timeupdate', function() { var slider = document.getElementById('slider'); slider.value = this.currentTime / this.duration * 100; }); function seekAudio() { var audio = document.getElementById('myAudio'); audio.currentTime = document.getElementById('slider').value / 100 * audio.duration; audio.play(); } ``` 在`timeupdate`事件处理函数中，我们将音频的当前播放时间转换为百分比，并设置到滑块的值上。`seekAudio`函数则根据滑块的值来改变音频的播放位置，并启动播放。此外，有时候拖动进度条可能会导致音频快进或快退后的瞬间静音，这是因为浏览器在某些情况下可能需要重新加载音频数据。为了解决这个问题，我们可以监听`canplaythrough`事件，确保音频数据已经加载完毕再开始播放： ```javascript audio.addEventListener('canplaythrough', function() { this.play(); }); ``` 通过这样的处理，我们不仅修复了拖动进度条时可能导致的问题，还实现了音频播放和进度条的同步。这使得用户可以自由控制音频播放进度，而不会出现播放异常或者进度条显示不准确的情况。在实际开发中，还可以添加更多功能，如音量控制、播放/暂停按钮的视觉反馈等，以提供更完整的音频播放体验。

资源推荐

资源详情

资源评论

收起资源包目录

audio_demo.zip （6个子文件）

audio_demo

css

audio.css 2KB

image

pause.png 2KB

play.png 2KB

audio.html 2KB

script

jquery-1.8.2.min.js 92KB

audio.js 6KB

<!DOCTYPE html> <html> <head> <title>H5 audio Demo</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <link href="css/audio.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="script/jquery-1.8.2.min.js"></script> <script type="text/javascript" src="script/audio.js"></script> </head> <body> <div class="audio-wrapper"> <audio> <source src="file/Beta-B_Kan R. Gao.mp3" type="audio/mp3"> </audio> <div class="audio-left"> <img id="audioPlayer0" src="image/play.png"> </div> <div class="audio-right"> <p style="max-width: 536px;">Beta-B_Kan R. Gao.mp3</p> <div class="progress-bar-bg" id="progressBarBg0"> <span id="progressDot0"></span> <div class="progress-bar" id="progressBar0"></div> </div> <div class="audio-time"> <span class="audio-length-current" id="audioCurTime0">00:00</span> <span class="audio-length-total">01:06</span> </div> </div> </div> <div class="audio-wrapper"> <audio> <source src="file/Launch_Kan R. Gao.mp3" type="audio/mp3"> </audio> <div class="audio-left"> <img id="audioPlayer1" src="image/play.png"> </div> <div class="audio-right"> <p style="max-width: 536px;">Launch_Kan R. Gao.mp3</p> <div class="progress-bar-bg" id="progressBarBg1"> <span id="progressDot1"></span> <div class="progress-bar" id="progressBar1"></div> </div> <div class="audio-time"> <span class="audio-length-current" id="audioCurTime1">00:00</span> <span class="audio-length-total">01:57</span> </div> </div> </div> </body> </html>

评论收藏

内容反馈