{"id":13671210,"url":"https://github.com/weizhenye/Danmaku","last_synced_at":"2025-04-27T14:33:09.902Z","repository":{"id":12387200,"uuid":"15039456","full_name":"weizhenye/Danmaku","owner":"weizhenye","description":"A high-performance JavaScript danmaku engine. 高性能弹幕引擎库","archived":false,"fork":false,"pushed_at":"2025-02-05T08:10:50.000Z","size":339,"stargazers_count":693,"open_issues_count":1,"forks_count":74,"subscribers_count":13,"default_branch":"master","last_synced_at":"2025-04-12T10:19:54.373Z","etag":null,"topics":["danmaku","danmu"],"latest_commit_sha":null,"homepage":"https://danmaku.js.org","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/weizhenye.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2013-12-09T05:59:23.000Z","updated_at":"2025-04-11T13:13:46.000Z","dependencies_parsed_at":"2024-11-11T08:33:41.796Z","dependency_job_id":"10b64fca-a624-4894-828d-77421f85135e","html_url":"https://github.com/weizhenye/Danmaku","commit_stats":{"total_commits":141,"total_committers":6,"mean_commits":23.5,"dds":0.04255319148936165,"last_synced_commit":"70f242b962ec7925a5656113775d8ccca9f6e536"},"previous_names":[],"tags_count":30,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/weizhenye%2FDanmaku","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/weizhenye%2FDanmaku/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/weizhenye%2FDanmaku/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/weizhenye%2FDanmaku/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/weizhenye","download_url":"https://codeload.github.com/weizhenye/Danmaku/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251154355,"owners_count":21544482,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["danmaku","danmu"],"created_at":"2024-08-02T09:01:03.062Z","updated_at":"2025-04-27T14:33:09.497Z","avatar_url":"https://github.com/weizhenye.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","Danmaku","Clients"],"sub_categories":["HTML/JavaScript"],"readme":"# Danmaku\n\n[![GitHub Action](https://img.shields.io/github/actions/workflow/status/weizhenye/Danmaku/ci.yml?logo=github)](https://github.com/weizhenye/Danmaku/actions)\n[![Codecov](https://img.shields.io/codecov/c/gh/weizhenye/Danmaku?logo=codecov)](https://codecov.io/gh/weizhenye/Danmaku)\n[![License](https://img.shields.io/npm/l/danmaku)](https://github.com/weizhenye/danmaku/blob/master/LICENSE)\n[![File size](https://img.shields.io/bundlephobia/minzip/danmaku)](https://bundlephobia.com/result?p=danmaku)\n\n\u003cspan\u003e・\u003c/span\u003e\n\u003ca href=\"https://danmaku.js.org/\"\u003eOnline Demo\u003c/a\u003e\n\u003cspan\u003e・\u003c/span\u003e\n\u003ca href=\"https://github.com/weizhenye/Danmaku/wiki/%E4%B8%AD%E6%96%87%E6%96%87%E6%A1%A3\"\u003e中文文档\u003c/a\u003e\n\u003cspan\u003e・\u003c/span\u003e\n\nDanmaku is a JavaScript library to display flying comments on HTML media elements (video and audio). It can also display comments to your container in real time without timeline.\n\n## Installation\n\n[![NPM Version](https://img.shields.io/npm/v/danmaku?logo=npm)](https://www.npmjs.com/package/danmaku)\n[![jsDelivr](https://img.shields.io/jsdelivr/npm/hm/danmaku?logo=jsdelivr)](https://www.jsdelivr.com/package/npm/danmaku)\n[![](https://img.shields.io/badge/unpkg-555?logo=unpkg)](https://unpkg.com/danmaku/)\n\n```bash\nnpm install danmaku\n```\n\n```js\n// Full version\nimport Danmaku from 'danmaku';\n// DOM engine only\nimport Danmaku from 'danmaku/dist/esm/danmaku.dom.js';\n// Canvas engine only\nimport Danmaku from 'danmaku/dist/esm/danmaku.canvas.js';\n```\n\n## Usage\n\n### Media mode\n\n```html\n\u003cdiv id=\"my-video-container\" style=\"width:640px;height:360px;position:relative;\"\u003e\n  \u003cvideo id=\"my-video\" src=\"./example.mp4\" style=\"position:absolute;\"\u003e\u003c/video\u003e\n\u003c/div\u003e\n\n\u003cdiv id=\"my-audio-container\" style=\"width:640px;height:360px;position:relative;\"\u003e\u003c/div\u003e\n\u003caudio id=\"my-audio\" src=\"./example.mp3\"\u003e\u003c/audio\u003e\n\n\u003cscript src=\"path/to/danmaku.min.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n  var danmaku1 = new Danmaku({\n    container: document.getElementById('my-video-container'),\n    media: document.getElementById('my-video'),\n    comments: []\n  });\n  var danmaku2 = new Danmaku({\n    container: document.getElementById('my-audio-container'),\n    media: document.getElementById('my-audio'),\n    comments: []\n  });\n\u003c/script\u003e\n```\n\n### Live mode\n\nTo display comments in real time, you need to set up server and use something like [Socket.IO](http://socket.io/). Danmaku is just receiving comments data and display them to container.\n\nHere is a simple example using with Socket.IO and Node.js.\n\nServer:\n\n```js\nconst app = require('http').createServer(handler);\nconst io = require('socket.io')(app);\napp.listen(80);\nfunction handler(req, res) {\n  // your handler...\n}\nio.on('connection', socket =\u003e {\n  socket.on('danmaku', comment =\u003e {\n    socket.broadcast.emit('danmaku', comment);\n  });\n});\n```\n\nClient:\n\n```html\n\u003cdiv id=\"my-container\" style=\"width:640px;height:360px;\"\u003e\u003c/div\u003e\n\u003cbutton id=\"send-button\"\u003eSend\u003c/button\u003e\n\n\u003cscript src=\"path/to/socket.io.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"path/to/danmaku.min.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n  var danmaku = new Danmaku({\n    container: document.getElementById('my-container')\n  });\n  var socket = io();\n  socket.on('danmaku', function(comment) {\n    danmaku.emit(comment)\n  });\n  var btn = document.getElementById('send-button');\n  btn.addEventListener('click', function() {\n    var comment = {\n      text: 'bla bla',\n      style: {\n        fontSize: '20px',\n        color: '#ffffff'\n      },\n    };\n    danmaku.emit(comment);\n    socket.emit('danmaku', comment);\n  });\n\u003c/script\u003e\n```\n\n## API\n\n### Initialization\n\n```js\nvar danmaku = new Danmaku({\n  // REQUIRED. The stage to display comments will be appended to container.\n  container: document.getElementById('my-container'),\n\n  // media can be \u003cvideo\u003e or \u003caudio\u003e element,\n  // if it's not provided, Danmaku will be in live mode\n  media: document.getElementById('my-media'),\n\n  // Array of comment, used in media mode,\n  // you can find its format in `danmaku.emit` API.\n  comments: [],\n\n  // You can use DOM engine or canvas engine to render comments.\n  // 'DOM' by default in full version.\n  engine: 'canvas',\n\n  // You can also set speed by using `danmaku.speed` API.\n  speed: 144\n});\n```\n\n### Emit a comment\n\n```js\ndanmaku.emit({\n  text: 'example',\n\n  // 'rtl'(right to left) by default, available mode: 'ltr', 'rtl', 'top', 'bottom'.\n  mode: 'rtl',\n\n  // Specified in seconds, if not provided when using with media,\n  // it will be set to `media.currentTime`. Not required in live mode.\n  time: 233.3,\n\n  // When using DOM engine, Danmaku will create a \u003cdiv\u003e node for each comment,\n  // the style object will be set to `node.style` directly, just write with CSS rules.\n  // For example:\n  style: {\n    fontSize: '20px',\n    color: '#ffffff',\n    border: '1px solid #337ab7',\n    textShadow: '-1px -1px #000, -1px 1px #000, 1px -1px #000, 1px 1px #000'\n  },\n\n  // When using canvas engine, Danmaku will create a \u003ccanvas\u003e object for each comment,\n  // you should pass in a CanvasRenderingContext2D object.\n  // For example:\n  style: {\n    font: '10px sans-serif',\n    textAlign: 'start',\n    // Note that 'bottom' is the default\n    textBaseline: 'bottom',\n    direction: 'inherit',\n    fillStyle: '#000',\n    strokeStyle: '#000',\n    lineWidth: 1.0,\n    // ...\n  },\n\n  // A custom render to draw comment.\n  // when `render` exist, `text` and `style` will be ignored.\n\n  // When using DOM engine, you should return an HTMLElement.\n  render: function() {\n    var $div = document.createElement('div');\n    var $img = document.createElement('img');\n    $img.src = '/path/to/xxx.png';\n    $div.appendChild($img);\n    return $div;\n  },\n  // When using canvas engine, you should return an HTMLCanvasElement.\n  render: function() {\n    var canvas = document.createElement('canvas');\n    canvas.width = 320;\n    canvas.height = 180;\n    var ctx = canvas.getContext('2d');\n    ctx.beginPath();\n    ctx.arc(75, 75, 50, 0, 2 * Math.PI);\n    ctx.stroke();\n    return canvas;\n  }\n});\n```\n\nMore details about [CanvasRenderingContext2D](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D).\n\nTips:\n* With DOM engine, you may want to change line spacing by set `line-height` to each comment, a better way is set `line-height` to the container.\n* With canvas engine, line height is `1.2` by default, you can set it with `style.font`.\n* With canvas engine, `style.font` uses the same syntax as the [CSS font](https://developer.mozilla.org/en-US/docs/Web/CSS/font) specifier. However you can only use `px`, `%`, `em`, `rem` units, I'm sure you don't need others.\n* There is a hitbox for each comment, which height is determined by its line height. With canvas engine, when `style.textBaseline` is `top` or `hanging`, the baseline is set to top of the hitbox; when it's `middle`, baseline is middle of the hitbox; otherwise baseline is bottom of the hitbox. So if you set `style.textBaseline` to `alphabetic` or `hanging`, the comment's head or foot may out of the hitbox and be invisible.\n* With canvas engine, [`style.filter`](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/filter) is supported in Chrome 52 and Firefox 49.\n\n### Resize\n\nDo it when you resize container.\n\n```js\ndanmaku.resize();\n```\n\n### Show\n\n```js\ndanmaku.show();\n```\n\n### Hide\n\nIf you set `display: none;` to the container directly when using DOM engine, you should also do danmaku.hide() otherwise the typesetting will be broken when it's showed.\n\n```js\ndanmaku.hide();\n```\n\n### Clear\n\nClear current stage.\n\n```js\ndanmaku.clear();\n```\n\n### Speed\n\nThere is a property `duration` for all comments, which means how long will a comment be shown to the stage. `duration` is calculated by `stage.width / danmaku.speed`, and `danmaku.speed` is a standard for all comments, because the actually speed for each comment is then calculated by `(comment.width + stage.width) / duration`. The default value is 144.\n\n```js\ndanmaku.speed = 144;\n```\n\n### Destroy\n\nDestroy `danmaku` instance and release memory.\n\n```js\ndanmaku.destroy();\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fweizhenye%2FDanmaku","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fweizhenye%2FDanmaku","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fweizhenye%2FDanmaku/lists"}