首页 > 其他分享 >Media Session API

Media Session API

时间:2024-04-29 16:00:12浏览次数:29  
标签:pause console 媒体 Media API Session navigator mediaSession

Media Session API 控制媒体播放和自定义媒体通知


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Media Session API</title>
  </head>
  <body>
    <audio id="audio" src="./tts.mp3"></audio>
    <button type="button" id="btn-play">播放</button>
    <button type="button" id="btn-pause">暂停</button>

    <script>
      // 允许我们控制媒体播放和自定义媒体通知。这意味着我们可以定义媒体元数据,如标题、艺术家、专辑和插图,并响应媒体相关事件,如播放、暂停、下一个和上一个

      // Media Session API: 当前媒体会话并保存所有元数据和播放控制的对象
      // 通过提供与媒体相关的事件、动作和元数据来控制媒体播放

      /** @type {HTMLAudioElement} */
      const audioDOM = document.getElementById('audio');
      const playBtn = document.getElementById('btn-play');
      const pauseBtn = document.getElementById('btn-pause');

      // 创建媒体元数据
      const metaData = new MediaMetadata({
        // 媒体标题
        title: '音乐标题',
        // 媒体类型
        artist: '艺术家',
        // 媒体专辑
        album: '专辑',
        // 媒体封面
        artwork: [
          { src: 'http://p2.music.126.net/txQOuRf20d2fKbuyxhtNRA==/109951166512080386.jpg?param=130y130', sizes: '150x150', type: 'image/png' },
          { src: 'http://p2.music.126.net/txQOuRf20d2fKbuyxhtNRA==/109951166512080386.jpg?param=130y130', sizes: '500x500', type: 'image/png' },
        ],
      });

      // 设置媒体元数据
      navigator.mediaSession.metadata = metaData;
      console.log("navigator.mediaSession => ", navigator.mediaSession)

      playBtn.addEventListener('click', () => {
        audioDOM.play();
      })
      pauseBtn.addEventListener('click', () => {
        audioDOM.pause();
      })

      // 监听媒体事件
      navigator.mediaSession.setActionHandler('play', () => {
        audioDOM.play();
        console.log('play');
      });
      navigator.mediaSession.setActionHandler('pause', () => {
        audioDOM.pause();
        console.log('pause');
      });
      navigator.mediaSession.setActionHandler('nexttrack', () => {
        console.log('next track');
      });
      navigator.mediaSession.setActionHandler('previoustrack', () => {
        console.log('previous track');
      });
    </script>
  </body>
</html>

标签:pause,console,媒体,Media,API,Session,navigator,mediaSession
From: https://www.cnblogs.com/chlai/p/18165954

相关文章

  • ABAP 调用外部WEBAPI
    ABAP代码如下,仅在内部测试通过,未涉及外部网络WEBAPI及跨域调用。*&---------------------------------------------------------------------**&ReportZYC_WEBAPI*&Restfulapi测试REPORTZYC_WEBAPI.DATA:LENTYPEI,"发送报文长度LEN_STRING......
  • webapi动态创建后台任务(使用排队的后台任务)
    很多时候我们都会使用后台定时任务,但有些任务不需要定时执行,只需要请求到来时执行一次,比如请求服务器到某个地方同步数据,但请求不需要等数据同步完成再响应。这时候就可以使用排队的后台任务。基本原理是用一个队列保存任务委托,然后用一个后台定时任务依次执行队列中的委托。MSD......
  • windows api SendMessage依赖的库和头文件
    SendMessage 是WindowsAPI中的一个函数,用于向指定窗口发送消息。在WindowsAPI中,SendMessage 函数的原型定义在 winuser.h 头文件中,因此您需要包含该头文件。另外,SendMessage 函数属于User32.dll动态链接库,因此您需要在链接时引入User32.lib库。#pragmacomment......
  • WEBAPI传参及默认首页设置
    开发工具:VS2017创建WEBAPI,1.选择ASP.NETCoreWeb应用程序2.选择如下,HTTPS配置勾选去掉,暂不配置3.“属性”中调试默认界面及launchsettings.json 4.调试以后默认页面 5. ......
  • cookie,session,token 详解
    发展史1、很久很久以前,Web基本上就是文档的浏览而已,既然是浏览,作为服务器,不需要记录谁在某一段时间里都浏览了什么文档。每次请求都是一个新的HTTP协议,就是请求加响应,尤其是我不用记住是谁刚刚发了HTTP请求,每个请求对我来说都是全新的。这段时间很嗨皮。2、但是随着交互式Web......
  • Django32session登录验证操作33缓存操作34分页操作
    Django32session登录验证操作33缓存操作34分页操作 Django笔记三十二之session登录验证操作 合集-Django笔记(19) 1.Django笔记二十四之数据库函数之比较和转换函数2023-04-182.Django笔记二十五之数据库函数之日期函数2023-04-193.Django笔记二十六之数据库函数之......
  • composition api
    setup//componentexportdefault{setup(props,context){//该函数在组件属性被赋值后立即执行,早于所有生命周期钩子函数//props是一个对象,包含了所有的组件属性值//context是一个对象,提供了组件所需的上下文信息}}context对象的成员成员类......
  • reactivity api
    reactivityapi:https://v3.vuejs.org/api/reactivity-api获取响应式数据API传入返回备注reactiveplain-object对象代理深度代理对象中的所有成员readonlyplain-objectorproxy对象代理只能读取代理对象中的成员,不可修改refany{value:...}对va......
  • Compression Stream API
    使用gzip或者默认格式压缩和解压缩数据<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><metaname="viewport"content="width=device-width,initial-scale=1.0"/><titl......
  • Cookie Store API
    CookieStoreAPI获取和设置cookie的信息无法获取HttpOnly标记的cookieexpires为null时,表示会话结束时过期domain只有在domain为当前域名的主域名时才显示(不包含子域名),否则为null.<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/>......