如何创建一个好的音乐网络应用程序/网站？电视电影小迷妹 TVco.cn

您当然可以开发自己的播放器，但是您将需要花费数周的时间与每个唱片公司联系以清除音乐权利，并且更新歌曲目录不会那么灵活。更快的解决方案是使用交钥匙式网络广播解决方案，但最终，它们的价格可能会很高，并且不会真正遵循人们的新音乐消费习惯。

我们在Soundsgood的愿景是改为使用所有流服务（Spotify，Apple Music，Deezer，YouTube，SoundCloud，Napster，Qobuz等）。这样，已经清除了数千万首曲目的音乐权利，人们可以在他们每天使用的音乐应用程序中直接关注您和您的播放列表。您会培养追随者，保留，恶名和病毒。

当听众单击Soundsgood播放器上的播放时，他们可以与自己选择的平台进行连接。音乐开始。他们可以保存它。跟着你。就那么简单。

在智能手机上，听众可以立即在他们喜欢的流媒体应用程序中重定向，可以在其中离线收听您的内容，关注您的播放列表等。

Soundsgood嵌入式播放器将重点放在播放列表的标识（艺术品，标题等）上，而不是放在曲目列表上，因为如果作为策展人，曲目对您来说很重要，那么当今人们倾向于偏向倾听。它为您提供了小部件下方的更多空间，以添加有趣的内容，例如用富有洞察力的评论描述曲目，而不仅仅是显示曲目标题和持续时间。（注意：如果需要，侦听器仍可以在小部件内滚动以查看曲目列表。）

如果您的听众更多地关注曲目，则可以嵌入Soundsgood播放列表页面（而不是嵌入小部件）。结果，您的听众将能够直接在台式机上查看曲目列表，并在智能手机上更舒适地查看。您可以添加自己的粘性标头来处理到其他页面的导航。

您可以通过在iframe代码中将“ / embed / ”替换为“ / playlist / ”来获得这样的结果：

BACKPACKERZ是法国著名的嘻哈音乐博客。他们选择了Soundsgood来为其音乐页面提供动力。

＃01-桌面主页

https://www.thebackpackerz.com/radio/

此页面由BACKPACKERZ 100％开发。还没有Soundsgood小部件。

＃02 —台式机上的播放列表页面

重旋转

您可以在顶部看到Soundsgood窗口小部件。其他一切都是自定义的。

＃03 —智能手机上的两个页面

Soundsgood小部件播放器是完全可定制的。

在Soundsgood播放列表编辑器中，您可以自定义播放列表标题和插图，这些基本上是播放器上唯一的设计元素。这全都与沉浸感和灵感有关。

在嵌入代码中，您可以自定义：

带有内置iframe“ height ”和“ width ”参数的小部件尺寸
播放按钮的颜色 （在播放器中的任何地方也用作主要颜色），添加URL参数“ color ”和十六进制颜色代码作为值。

  <iframe height =“ 480” width =“ 100％” src =“ https://play.soundsgood.co/embed/playlist-ID？color = 111333 ” frameborder =“ 0” webkitallowfullscreen mozallowfullscreen allowfullscreen allow =“自动播放；已加密-media“ allowtransparency =” true“>

要隐藏您的徽标 （由于我们在您的网站上，因此无需在小部件的右上方显示徽标），可以使用URL参数“ hideCurator ”，其值为“ 1 ”：

  <iframe height =“ 480” width =“ 100％” src =“ https://play.soundsgood.co/embed/playlist-ID？hideCurator = 1 ” frameborder =“ 0” webkitallowfullscreen mozallowfullscreen allowfullscreen allow =“自动播放；已加密-media“ allowtransparency =” true“>

要隐藏播放列表标题 （如果您的作品在所有设备上都足够），可以使用URL参数“ hideTitle”，其值为“ 1 ”：

  <iframe height =“ 480” width =“ 100％” src =“ https://play.soundsgood.co/embed/playlist-ID？hideTitle = 1 ＆hideCurator = 1” frameborder =“ 0” webkitallowfullscreen mozallowfullscreen allowfullscreen allow =“自动播放；加密媒体” allowtransparency =“ true”>

动态iframe加载

由于开发人员讨厌在任何地方重复代码，因此您还可以嵌入通用的Soundsgood小部件并动态加载“ 播放列表ID ” 作为变量。这样，您可以避免例如从一个播放列表切换到另一个播放列表时重新加载整个页面：

  <iframe height =“ 480” width =“ 100％” src =“ https://play.soundsgood.co/embed/ {{playlist-ID }} ” frameborder =“ 0” webkitallowfullscreen mozallowfullscreen allowfullscreen allow =“自动播放；已加密-media“ allowtransparency =” true“>

智能手机的调整

如果您对台式机和智能手机上iframe的默认行为不满意，请随时为同一播放列表设置两个不同的iframe，并根据用户的设备相应地加载它们。这样，您可以在台式机上获得16：9的外观，而在智能手机上获得1：1的外观。

有关其他阅读材料，请查阅Aravind Iyer撰写的精彩文章以及其他技巧和资源，例如最小高度或http://embedsensitively.com/。