html5音频实现微信语音播放效果

前台的一般效果图如下:

单击以播放mp3录音. 单击另一录音，当前录音停止！

关于播放，这非常简单，我们可以使用css3逐帧来实现. 关于逐帧，我以前的文章还写道:

图片如下:

除外，其余都是音频的js控制.

关于html5音频标签，您可以搜索许多属性，例如预加载，自动播放，循环，控件等. 要隐藏它，我们可以添加一个隐藏参数，代码如下:

 <audio preload="auto" hidden="true"><source src="mp3/Kalimba.mp3" type="audio/mpeg"></audio>

通过这种方式，可以隐藏和显示音频，然后我们可以使用js对其进行控制.

addTextTrack()    向音频/视频添加新的文本轨道
canPlayType()     检测浏览器是否能播放指定的音频/视频类型
load()    重新加载音频/视频元素
play()    开始播放音频/视频
pause()    暂停当前播放的音频/视频

该事件对我们非常有用. 您可以通过判断是否加载了音频来执行操作，例如，我们单击记录微信语音播放器 手机版，首先有一个加载，然后它就变成了我们前面提到的逐帧.

abort    当音频/视频的加载已放弃时
canplay    当浏览器可以播放音频/视频时
canplaythrough    当浏览器可在不因缓冲而停顿的情况下进行播放时
durationchange    当音频/视频的时长已更改时
emptied    当目前的播放列表为空时
ended    当目前的播放列表已结束时
error    当在音频/视频加载期间发生错误时
loadeddata    当浏览器已加载音频/视频的当前帧时
loadedmetadata    当浏览器已加载音频/视频的元数据时
loadstart    当浏览器开始查找音频/视频时
pause    当音频/视频已暂停时
play    当音频/视频已开始或不再暂停时
playing    当音频/视频在已因缓冲而暂停或停止后已就绪时
progress    当浏览器正在下载音频/视频时
ratechange    当音频/视频的播放速度已更改时
seeked    当用户已移动/跳跃到音频/视频中的新位置时
seeking    当用户开始移动/跳跃到音频/视频中的新位置时
stalled    当浏览器尝试获取媒体数据，但数据不可用时
suspend    当浏览器刻意不获取媒体数据时
timeupdate    当目前的播放位置已更改时
volumechange    当音量已更改时
waiting    当视频由于需要缓冲下一帧而停止

例如，以下代码:

audio.onloadedmetadata = function () {
    $(_this).removeClass("loading");
    $(_this).addClass("playing");
}

将音频文件加载到浏览器后，删除加载的并增加播放的.

以下代码可以控制音频播放或暂停

 var audio = document.getElementById('haorooms'); 
 if(audio!==null){             
    //检测播放是否已暂停.audio.paused 在播放器播放时返回false.
     alert(audio.paused);
  if(audio.paused)                     {                 
      audio.play();//audio.play();// 这个就是播放  
  }else{
   audio.pause();// 这个就是暂停
  }
 }

当然，它可以通过jquery轻松操作！

  var audio = $(that).children("audio")[0];//获取，这段代码直接从我们文件中copy而来，可以直接写$("audio")[0]
    audio.load();//加载
    audio.play();//播放
  audio.pause();//暂停

值得注意的是，语音播放结束后，我们可以使用计时器删除.

可以使用setTimeout编写计时器！关于setTimeout，您可以阅读我以前的文章！

计时器是一个变量！

  var second=$(that).data("second");//获取音频秒数
            _this.dshiqi=setTimeout(function(){ //dshiqi是外层定义好的一个变量！
                $(that).removeClass("playing");//播放完毕去除
            },second*1000)

请记住微信语音播放器 手机版，每次切换点击都会清除上一个计时器

 clearTimeout(_this.dshiqi);

如果您不清除计时器，请来回单击录音，这会出现问题！

以上是对具有微信的html5的音频播放效果的简单总结. 欢迎留言！

本文来自电脑杂谈，转载请注明本文网址：
https://www.pc-fly.com/a/shouji/article-246449-1.html