This is a combination of music and danmaku component
- https://gitee.com/zhang_jian_feng/tz8
use tz8 (Demo)
``
import tz8 from 'tz8'
Vue.use(tz8)
...
:musicConfig="{ music: music, end: end, loop: endHandler }"
:danmakuConfig="{ getFn: testGetFn, postFn: testPostFn }"
>
...
``
props (See below for details)
| props | default | do |
| --- | --- | --- |
| playerConfig | {} | Complete the basic configuration of the player as a whole |
| musicConfig | {} | Complete the configuration of song playback |
| danmakuConfig | {} | Complete the configuration of danmaku |
| actionConfig | {} | Complete some user-operable configurations |
1.playerConfig
| attributes| type | default | optional value| do |
| --- | --- | --- | --- | --- |
| max | Number, String| 896 | | The maximum width that the player can extend |
| user | String | 'default' | | Used for the generation of danmaku, which will affect the shielding of danmaku in the future |
| zindex | Number, String| 100 | | The overall zindex of the component, currently occupies 100 zindex |
2.musicConfig
| attributes| type | default | optional value | do |
| --- | --- | --- | --- | --- |
| music | Object | {} | | Song data (See below for details) |
| volume | Number, String| 50 | 0 <= val <= 100 | Song default volume, only initialization, 0 <= val <= 100 |
| loop | Function | (end) => { return true } | | The end of the song callback function |
| end | Array | null | | Customize the actionable behavior at the end of a song |
_Loop has a parameters -> end, This parameter indicates a value in the end Array_
_end parameter refers to the above example_
music can have attributes
- src : Url of song (must)
- name : The name of song
- cover : The background Image of song
- lyrics : The lyrics of song
- singer : Object, { lable: String, text: String }
- album: Object, { lable: String, text: String }
- origin: Object, { lable: String, text: String }
- quality: String
3.danmakuConfig
| attributes | type | default | optional value | do |
| --- | --- | --- | --- | --- |
| getFn | Object | {} | | Details will be explained later |
| postFn | Object | {} | | Details will be explained later |
| interval | Number | 40 | val >= 0 | Danmaku acquisition interval |
| advance | Number | 10 | val >= 0 && val < intreval| Danmaku gets time in advance |
| merge | Number | 10 | val >= 0 | If the remaining time of the song after the danmaku is acquired this time is too small, merge the time to the end |
| placeholder | String | '友好的发弹幕吧...' | | Default placeholder for danmaku input box |
| inputColor | String | '#66ccff' | Hexadecimal | Default color for danmaku post |
| inputMode | String | 'rtl' | 'rtl', 'center' | Default mode for danmaku post |
| inputText | String | '' | | Default test for danmaku input box |
| definedColor| Array | ['#ff0000', '#ffaa00', '#ff00ff', '#00ff00', '#aaff7f', '#00aaff', '#00ffff', '#ffff00', '#aaaa7f', '#bfbfbf', '#ffffff', '#000000']| | Provide user-selected barrage predefined colors |
| validator | Function| null | | Danmaku screen bypass function |
how to use danmaku_get_fn and danmaku_post_fn
$3
_danmaku\_get\_fn -> Object( the Object include call and back methods )_
- call: The callback function has two parameters (start, end). start represents the start time of the danmaku data interval, such as 20, which means that the requested danmaku time requires data greater than or equal to 20s. end represents the end time of the danmaku data interval, such as 40, which means that the requested danmaku time requires data less than 40s.
- back: Use this function to return the danmaku data.
_danmaku\_post\_fn -> Object( the Object include call and back methods )_
- call: The callback function has one parameter (value). value is the post danmaku data.
- back: If you have successfully post data, Use this function to return true, otherwise return false.
how to use validator
_validator_
- param => ( text, color, user, mode, set ): The set contains the user's current settings for blocking.
- if this fn is null, Any danmaku will be emitted.