h5 音频

Bertha 。 2021-07-24 20:33 461阅读 0赞

**音频**

**属性如图**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]

**音乐/视频媒介**  
audio标签内使用，可以改变音乐/视频格式

**js方法：**

对象.paused;  固有属性，表示播放和暂停状态，只能读取，布尔值
    	对象.play(); 播放音频
    	对象.pause(); 暂停音频
    	对象.addTextTrack()    为音视频加入一个新的文本轨迹    
    	对象.canPlayType()    检查指定的音视频格式是否得到支持    
    	对象.currentTime; 获取音频当前已播放时间,可读可写，写入值是不加单位的秒数
    	对象.duration; 获取音频总时间

**js回调**

timeupdate 播放过程中的回调
    canplay    当浏览器可以开始播放该音视频时产生该事件    
    abort    当音视频加载被异常终止时产生该事件    
    canplaythrough    当浏览器可以开始播放该音视频到结束而无需因缓冲而停止时产生该事件    
    durationchange    当媒体的总时长改变时产生该事件    
    emptied    当前播放列表为空时产生该事件    
    ended    当前播放列表结束时产生该事件    
    error    当加载媒体发生错误时产生该事件    
    loadeddata    当加载媒体数据时产生该事件    
    loadedmetadata    当收到总时长，分辨率和字轨等metadata时产生该事件    
    loadstart    当开始查找媒体数据时产生该事件    
    pause    当媒体暂停时产生该事件    
    play    当媒体播放时产生该事件    
    playing    当媒体从因缓冲而引起的暂停和停止恢复到播放时产生该事件    
    progress    当获取到媒体数据时产生该事件    
    ratechange    当播放倍数改变时产生该事件    
    seeked    当用户完成跳转时产生该事件    
    seeking    当用户正执行跳转时操作的时候产生该事件    
    stalled    当试图获取媒体数据，但数据还不可用时产生该事件    
    suspend    当获取不到数据时产生该事件    
    timeupdate    当前播放位置发生改变时产生该事件    
    volumechange    当前音量发生改变时产生该事件    
    waiting    当视频因缓冲下一帧而停止时产生该事件

**js属性**

audioTracks    返回可用的音轨列表（MultipleTrackList对象）    
    autoplay    媒体加载后自动播放    
    buffered    返回缓冲部件的时间范围(TimeRanges对象)    
    controller    返回当前的媒体控制器（MediaController对象）    
    controls    显示播控控件    
    crossOrigin    CORS设置    
    currentSrc    返回当前媒体的URL    
    currentTime    当前播放的时间，单位秒    
    defaultMuted    缺省是否静音    
    defaultPlaybackRate    播控的缺省倍速    
    duration    返回媒体的播放总时长，单位秒    
    ended    返回当前播放是否结束标志    
    error    返回当前播放的错误状态    
    initialTime    返回初始播放的位置    
    loop    是否循环播放    
    mediaGroup    当前音视频所属媒体组 (用来链接多个音视频标签)    
    muted    是否静音    
    networkState    返回当前网络状态    
    paused    是否暂停    
    playbackRate    播放的倍速    
    played    当前播放部件已经播放的时间范围(TimeRanges对象)    
    preload    页面加载时是否同时加载音视频    
    readyState    返回当前的准备状态 {
        0: HAVE_NOTHING 没有准备就绪的状态
        1: HAVE_METADATA 关于音频就绪的元数据
        2: HAVE_CURRENT_DATA 当前可用，但下一帧不确定
        3: HAVE_FUTURE_DATA 当前和下一帧可用
        4: HAVE_ENOUGH_DATA 有足够的数据支持播放
    }   
    seekable    返回当前可跳转部件的时间范围(TimeRanges对象)    
    seeking    返回用户是否做了跳转操作    
    src    当前音视频源的URL    
    startOffsetTime    返回当前的时间偏移(Date对象)    
    textTracks    返回可用的文本轨迹(TextTrackList对象)    
    videoTracks    返回可用的视频轨迹(VideoTrackList对象)    
    volume    音量值

**基本使用**

(1)在timeupdate回调中,可通过e.target.currentTime不断获取当前播放事件
    
    (2)在canplay回调中,通过ref对象.duration获取音频播放总时间
    	通过生命周期或者监听器的方式,使用ref对象.duration获取的播放总时间为NaN

代码示例:

<audio ref='audio' :src="url" @timeupdate="updateTime" @canplay="getDuration"></audio>
    
    
     play()
     { 
       
         this.pause=!this.pause
    
         if(this.song.paused)
         { 
             this.song.play();
         }else{ 
             this.song.pause();
         }
     },
     //该回调中获取duration 
     getDuration(e) { 
     
      this.duration = this.$refs.audio.duration;
    
      },
     //播放过程中调用的回调
     updateTime(e) { 
       this.currentTime = e.target.currentTime;  //获取audio当前播放时间
       
     },

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]: /images/20210724/3f90fc77fe824f25b0b56ef305f0daca.png