radio组件_用于播放Radio4000频道和更多内容的Web组件

radio组件

Radio4000播放器 (Radio4000 Player)

This is a web component that plays channels from Radio4000. It uses the public radio4000-api and Vue.js.

这是一个播放Radio4000频道的Web组件。 它使用公共radio4000-api和Vue.js。

View demo 查看演示 Download Source 下载源

如何使用 (How to use)

You can load the player with a CDN, like this:

您可以使用CDN加载播放器，如下所示：

<script async src="https://cdn.jsdelivr.net/npm/radio4000-player"></script>
<radio4000-player channel-slug="good-time-radio"></radio4000-player>

OR, you can use a package manager:

或者，您可以使用包管理器：

// npm install radio4000-player
import 'radio4000-player'
// now you can use <radio4000-player> in your templates

OR, you can use an iframe (source):

或者，您可以使用iframe( 源 )：

<iframe src="https://api.radio4000.com/embed?slug=detecteve" width="320" height="500" frameborder="0"></iframe>

API (API)

Here's a complete list of all the attributes you can set and change on the web component. These do not affect the iframe version.

这是您可以在Web组件上设置和更改的所有属性的完整列表。 这些不会影响iframe版本。

Attribute	Type	Description
channel-slug	string	Radio4000 channel slug (ex: oskar)
channel-id	string	Radio4000 channel id (ex: -JYZvhj3vlGCjKXZ2cXO)
track-id	string	Radio4000 track id (ex: -JYEosmvT82Ju0vcSHVP)
volume	integer	from 0 to 100 (default: 100)
autoplay	boolean	if it should start playing automatically (default: false)
shuffle	boolean	if tracks should be shuffled (default: false)

属性	类型	描述
通道鼻塞	string	Radio4000通道塞(例如： oskar )
频道编号	string	Radio4000频道ID(例如： -JYZvhj3vlGCjKXZ2cXO )
轨道编号	string	Radio4000轨道ID(例如： -JYEosmvT82Ju0vcSHVP )
卷	integer	从0到100(默认值： 100 )
自动播放	boolean	是否应该自动开始播放(默认值： false )
洗牌	boolean	是否应改组轨道(默认值： false )

例子 (Examples)

Remember that HTML attributes are dasherized channel-slug whereas JavaScript expects CamelCase channelSlug.

请记住，HTML属性是反斜线的channel-slug而JavaScript需要CamelCase channelSlug 。

var player = document.querySelector('radio4000-player')

// Load radio channel either by slug or id.
player.channelSlug = 'sugar-hiccup'
player.channelId = '-JYZvhj3vlGCjKXZ2cXO'

// Load a specific track.
player.trackId = '-JYEosmvT82Ju0vcSHVP'

// Change the volume.
player.volume = 25

// Enable shuffle.
player.shuffle = true

To enable autoplay:

要启用自动播放：

<radio4000-player channel-slug="200ok" autoplay="true"></radio4000-player>

大事记 (Events)

You can listen for events directly on each <radio4000-player> element.

您可以直接在每个<radio4000-player>元素上侦听事件。

• trackChanged - This event fires whenever the current track is

  trackChanged每当当前轨道为

  
  changed. It is an object containing two
  改变了。 它是一个包含两个对象

  track objects,

  track物体

  
  
  

  previousTrack and track

  previousTrack和track

• trackEnded - This event fires when the current track finishes

  trackEnded当前轨道结束时触发此事件

  
  playing. It is an object containing one
  玩。 它是一个包含一个的对象

  track object.

  track对象。

• mediaNotAvailable - This event fires when a track could not be

  mediaNotAvailable当无法跟踪时触发此事件

  
  played by its provider player (youtube etc.), since its media for
  由其提供者播放器(youtube等)播放，因为其媒体
  
  not available to be played. It is an object containing one
  无法播放。 它是一个包含一个的对象

  track

  track

  
  object, the track which youtube video could not be played. Youtube
  对象，无法播放youtube视频的轨道。 优酷
  
  does not give much detail about "why" a media could not be player,
  没有详细说明“为什么”媒体不能成为播放器，
  
  in the event sent by their javascript player. In you application you
  在其JavaScript播放器发送的事件中。 在您的应用程序中
  
  could make a call to youtube's apis to get more info about a track,
  可以致电youtube的api以获得有关曲目的更多信息，
  
  and figure out why, with a request such as the following.
  并通过以下请求找出原因。

# unrelated example of an HTTP query to Youtube api for details about
a video (replace `YOUTUBE_API_KEY` and `YOUTUBE_VIDEO_ID`)
GET https://www.googleapis.com/youtube/v3/videos?key=YOUTUBE_API_KEY&id=YOUTUBE_VIDEO_ID&fields=items(id,snippet,contentDetails,statistics)&part=snippet,contentDetails,statistics

Here's an example of how to listen for the trackChanged event. It is the same approach for all events. In the case of both trackChanged and trackEnded, the event.detail[0] argument will be a Radio4000 track object.

这是一个如何监听trackChanged事件的trackChanged 。 所有事件都采用相同的方法。 对于trackChanged和trackEnded ， event.detail[0]参数将是Radio4000 track对象。

var player = document.querySelector('radio4000-player')
player.addEventListener('trackChanged', (event) => {
  console.info('trackChanged event', event.detail[0])
  // { track: { [...] } }
})

方法 (Methods)

Danger zone. We are still finalizing the API for methods so except this to change.

危险区。 我们仍在敲定方法的API，因此除了更改之外。

// Get access to the Vue component behind the web component to access methods.
var player = document.querySelector('radio4000-player')
var vue = player.__vue_custom_element__.$children[0]

var tracks = [
	{
		id: 'uniqueId',
		title: 'A title to display',
		url: 'an url to link to in the track list',
		ytid: 'an id to the youtube video'
	}
];

var playlist = {
	title: `A title for this list`,
	image: 'https://raw.githubusercontent.com/internet4000/assets/master/radio4000/icon-r4.svg',
	tracks: tracks
};

vue.updatePlaylist(playlist)

If the playlist object contains a query string it will be shown on top of the track list.

如果播放列表对象包含query字符串，它将显示在曲目列表的顶部。

使用内部链接 (Using internal links)

If this player is used inside radio4000.com, we want the links to switch URL internally. For that you can use the boolean property r4-url like so.

如果在radio4000.com内部使用此播放器，我们希望链接在内部切换URL。 为此，您可以像这样使用布尔属性r4-url 。

<radio4000-player r4-url="true"></radio4000-player>

Therefore, URLs in the player header won't open new browser window but will just replace the URL like Ember router would have done.

因此，播放器标题中的URL不会打开新的浏览器窗口，而只会像Ember路由器那样替换URL。

发展历程 (Development)

• Feature branches are made from the master branch.

  功能分支由master分支构成。

• production branch is used for the production version releases.

  production分支用于生产版本发行版。

# 1. clone and install dependencies
git clone[email protected]:internet4000/radio4000-player.git
yarn

# 2. starts a server on http://localhost:4002 that autobuilds when files change
yarn start

测试中 (Testing)

# run tests once
yarn test

# (re)run tests as files change
yarn start; yarn cypress open

如何发布新版本 (How to release a new version)

Release a new patch e.g. 1.0.4 to 1.0.5.

发布一个新补丁，例如1.0.4到1.0.5 。

yarn release

Release a minor, major, or specific version:

发行次要，主要或特定版本：

yarn release minor
yarn release major
yarn release 0.8.3

翻译自: https://vuejsexamples.com/a-web-component-for-playing-embed-of-radio4000-channels-and-more/

radio组件