美文网首页
【JS】audio

【JS】audio

作者: 大Q本Q | 来源:发表于2019-06-19 17:53 被阅读0次

    方法 5个
    play() // 开始播放
    pause() // 暂停
    load() // 重新加载
    canPlayType() // 检测浏览器是否能播放指定类型
    addTextTrack() // unsupport 添加新文本轨道

    属性 29个 r:返回 s:设置
        src                         // r s  来源
        currentSrc                  // r    url
        loop                        // r s  循环
        volume                      // r s  音量
        muted                       // r s  静音
        paused                      // r s  暂停
        preload                     // r s  是否自动加载
    
        autoplay                    // r s  自动播放
        currentTime                 // r s  播放位置
        controls                    // r s  显示控制器
        crossOrigin                 // r s  CORS跨域设置
    
        duration                    // r    视频长度(s)
        buffered                    // r    缓冲范围
        readyState                  // r    是否就绪
        ended                       // r    是否播放完成
    
        networkState                // r    网络状态
        played                      // r    已播放部分的TimeRanges对象
        seekable                    // r    可寻址的TimeRanges(即可跳转到的位置范围)
        seeking                     // r    是否在寻址中(即在移动、跳转到新位置)
    
        ---------------------------------------------------------------------
    
        playbackRate                // r s  chrome&safari support 播放速度
        defaultPlayBackRate         // r s  chrome support 默认播放速度
        defaultMuted                // r s  chrome support 默认是否静音
    
        startDate                   // r    unsupport 当前时间便宜的Date对象
        audioTracks                 // r    unsupport 音轨
        textTracks                  // r    unsupport 返回文本轨迹
        videoTracks                 // r    unsupport 返回音频轨道
        controller                  // r    unsupport 控制器
        mediaGroup                  // r s  unsupport 所属的组合
    
    事件 21个
    
    let events = {
        'play':this.tmp,            // 播放时
        'pause':this.tmp,           // 暂停时
        'ended':this.playNext,      // 播放完一首
        'playing':this.tmp,         // 因缓冲暂停后,可以继续播放时
        'waiting':this.tmp,         // 因缓冲而停止
    
        'emptied':this.tmp,         // 播放列表为空
        'ratechange':this.tmp,      // 播放倍数改变时
        'volumechange':this.tmp,    // 音量改变时
        'timeupdate':this.tmp,      // 播放位置发生改变
        'seeking':this.tmp,         // 正在跳转时
        'seeked':this.tmp,          // 用户完成跳转时
    
    
        'loadstart':this.tmp,       // 开始查找媒体数据时
        'durationchange':this.tmp,  // 加载后,时长将由 "NaN" 变为音频/视频的实际时长
        'loadedmetadata':this.tmp,  // 收到总时长、分辨率、字轨等metadata时
        'loadeddata':this.tmp,      // 开始加载数据
        'process':this.tmp,         // 获取到媒体数据时
        'canplay':this.tmp,         // 可以开始播放
        'canplaythrough':this.tmp,  // 浏览器判断,开始播放到完成,无需停下来缓冲时
    
    
        'stalled':this.tmp,         // 试图获取媒体数据,但还不可用
        'suspend':this.tmp,         // 获取不到数据时
        'abort':this.tmp,           // 加载异常终止
        'error':this.tmp,           // 加载错误
        '':this.tmp
    }
    

    JavaScript控制音频

    <audio src="music.mp3" id='m'  preload='none'></audio>
    var m = document.getElementById('m')
    

    选择加载时机 (写在标签上)
    preload:用来控制音频在什么时候进行加载。
    <audio src="m.mp3" preload="auto"></audio>
    none:默认不加载,等有需要的时候再加载。
    metadata:元数据,默认不加载,但是可以提取该音频的元数据信息。
    auto:自动加载,网页加载完就加载整个音频。

    控制加载: m.load();//加载

    控制播放: m.play();
    控制暂停: m.pause();
    获取播放/暂停状态:
    m.play
    m.pause

    指定播放时间:m.fastSeek(20); (只有firefox支持,其他用currentTime来实现)
    获取和设置已播放的时间
    m.currentTime
    m.currentTime = 10;,音频会定位到10秒的播放位置。

    是否自动播放:
    m.autoplay = true;
    标签autoplay

    是否循环播放:
    m.loop = true;
    标签loop

    静音: m.muted = true;
    调节音量: m.volume = 0.1;

    显示控制面板:
    m.controls = true;
    标签:contrils

    方法 方法描述
    addTextTrack() 为音视频加入一个新的文本轨迹
    canPlayType() 检查指定的音视频格式是否得到支持
    load() 重新加载音视频标签
    play() 播放音视频
    pause() 暂停播放当前的音视频


    属性 属性描述
    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 返回当前的准备状态
    seekable 返回当前可跳转部件的时间范围(TimeRanges对象)
    seeking 返回用户是否做了跳转操作
    src 当前音视频源的URL
    startOffsetTime 返回当前的时间偏移(Date对象)
    textTracks 返回可用的文本轨迹(TextTrackList对象)
    videoTracks 返回可用的视频轨迹(VideoTrackList对象)
    volume 音量值
    事件
    事件描述
    abort 当音视频加载被异常终止时产生该事件
    canplay 当浏览器可以开始播放该音视频时产生该事件
    canplaythrough 当浏览器可以开始播放该音视频到结束而无需因缓冲而停止时产生该事件
    durationchange 当媒体的总时长改变时产生该事件
    emptied 当前播放列表为空时产生该事件
    ended 当前播放列表结束时产生该事件
    error 当加载媒体发生错误时产生该事件
    loadeddata 当加载媒体数据时产生该事件
    loadedmetadata 当收到总时长,分辨率和字轨等metadata时产生该事件
    loadstart 当开始查找媒体数据时产生该事件
    pause 当媒体暂停时产生该事件
    play 当媒体播放时产生该事件
    playing 当媒体从因缓冲而引起的暂停和停止恢复到播放时产生该事件
    progress 当获取到媒体数据时产生该事件
    ratechange 当播放倍数改变时产生该事件
    seeked 当用户完成跳转时产生该事件
    seeking 当用户正执行跳转时操作的时候产生该事件
    stalled 当试图获取媒体数据,但数据还不可用时产生该事件
    suspend 当获取不到数据时产生该事件
    timeupdate 当前播放位置发生改变时产生该事件
    volumechange 当前音量发生改变时产生该事件
    waiting 当视频因缓冲下一帧而停止时产生该事件

    相关文章

      网友评论

          本文标题:【JS】audio

          本文链接:https://www.haomeiwen.com/subject/evflqctx.html