火燒的Gmail
No Result
View All Result
  • 全部文章
  • SWAG 色站獨家福利連結
  • 成人內容
    • Chaturbate
    • SWAG
    • 成人網站
  • 數位行銷
    • PTT/Dcard
    • 線上工具
    • 工作術
    • Webflow
    • WordPress
    • Google AD
    • Google Search Console
    • SEO
  • 追蹤IG
火燒的Gmail
  • 全部文章
  • SWAG 色站獨家福利連結
  • 成人內容
    • Chaturbate
    • SWAG
    • 成人網站
  • 數位行銷
    • PTT/Dcard
    • 線上工具
    • 工作術
    • Webflow
    • WordPress
    • Google AD
    • Google Search Console
    • SEO
  • 追蹤IG
No Result
View All Result
No Result
View All Result

首頁 . 全部文章 . 網站技術 . Webflow . 想要在Webflow網頁裡播放音樂嗎?Plyr.io網站嵌入式音樂播放器首選|Webflow完整教學

想要在Webflow網頁裡播放音樂嗎?Plyr.io網站嵌入式音樂播放器首選|Webflow完整教學

2020/05/28 - Updated on 2020/10/18
in Webflow, 網站技術
0
SHARES
659
VIEWS

Webflow是個網頁架設平台,介面非常彈性,不懂程式的人也可以透過拖拉Drag and Drop進行操作,並且透過Webflow的動畫,做出專業感十足的個人網站,由於Webflow沒有過多外掛,因此速度也遠比多數WordPress佈景主題來得快。關於Webflow的完整介紹、優缺點分析,可以參見我這篇完整文章。我也會在部落格中,陸續和大家分享繁體中文圈最齊全的Webflow教學。

想要在Webflow網頁裡嵌入音樂播放器嗎?建議使用Plyr.io,因為它最符合大眾的網站瀏覽習慣。

文章結構

  • 不推薦在Webflow裡,用SoundCloud嵌入音軌
  • 建議使用Plyr.io,作為音樂播放器

不推薦在Webflow裡,用SoundCloud嵌入音軌

雖然Webflow官方推薦使用SoundCloud線上音樂分享平臺,作為網站的音樂播放器,在Webflow官方教學中,建議直接使用SoundCloud官方提供的嵌入程式Embed widget,鑲嵌音樂的音軌進網站中,主要是因為操作簡單,甚至只要使用聲音雲的免費版,就能馬上就能滿足初階使用者的使用需求。

但是真正使用後會發現,無論是免費版或是付費版Pro Unlimited USD$12/月,其實都達不太到使用者想要的效果。可以客製化的幅度很小,好比播放、暫停、快轉/倒轉五秒等功能不易操作;當使用者覺得煩、把音樂按暫停之後,也容易因為SoundCloud連結太大顆而誤觸,進而覺得網站體驗很差、跳離網頁;而且在手機版面看起來,SoundCloud的整體視覺呈現非常醜,然而手機卻是多數網站的主要流量來源,容易負面影響使用者對此網站的觀感。

建議使用Plyr.io,作為音樂播放器

雖然相對於可以無腦安裝的SoundCloud,Plyr.io對不熟悉程式語言、對網站架構不瞭解的人來說,可能會覺得有點麻煩,甚至感到困難,但其實並不難!只要克服之後會發現,基礎版Basic Version的Plyr,相較於SoundCloud難以修改的強勢程式碼,可以調整的幅度極大,好比播放器大小等諸多細節皆可調,可以用來改善網站整體的瀏覽體驗。

雖然Plyr.io現在還無法非常客製化,好比讓使用者可以選擇幾倍的播放速度。雖然Plyr的官方文件中提到,當使用者在瀏覽網頁上的Plyr音樂播放器時,「播放速度調整(Speed設定)」是預設好的選項,但從實際經驗上來看,他們只看得到「下載Download」,下載鍵才是官方的預設選項。但好處是,Plyr可以透過客製化程式碼Custom Code進行修改,未來我也將在部落格中教更多Plyr的語法調整。

Tags: Plyr.ioSoundCloudWebflow
Previous Post

防水包膜,小豪包佛

Next Post

使用Cloudflare託管網域,大幅加速WordPress網頁載入速度

Related Posts

PTT/Dcard

PTT 表特被刪文該怎麼找備份?一招神出被刪掉的推爆貼文(Dcard 外流查詢)

2021/09/26 - Updated on 2022/05/02
22.7k
PTT/Dcard

Dcard 西斯版奶樓、裸照樓、穴穴樓照片,透過 PTT brain 下載裸群圖庫備份

2021/09/26 - Updated on 2021/12/22
47.1k
網站技術

RecordCast 免安裝的網頁版線上螢幕錄影工具,支援影片剪輯字幕編輯

2021/06/12
307
PTT/Dcard

如何申請 Dcard 創作者俱樂部?狄卡個板功能開放!無名小站的時代回來了

2021/04/20 - Updated on 2021/04/23
1.2k
PTT/Dcard

PTT 美妝板的看板活躍時段,從推文中找出最近當紅的美妝水水 KOL

2021/03/20
469
PTT/Dcard

八卦板鄉民作息一覽表,追蹤各大看板的熱門時段、活躍用戶、推文或噓文數最多的帳號

2021/03/14 - Updated on 2021/03/18
967

分類

No Result
View All Result

文章結構

  • 不推薦在Webflow裡,用SoundCloud嵌入音軌
  • 建議使用Plyr.io,作為音樂播放器

本站獨家福利連結👇

  • 如何用 Twitter 搜尋18禁成人內容?推特搜尋功能教學

    0 shares
    Share 0 Tweet 0
  • Mybigtitsbabes 巨乳女優圖鑑,胸奴必逛的大奶妹子介紹網站,歐美大奶圖鑑 Babestoday、BigBoobsAlert

    0 shares
    Share 0 Tweet 0
  • 透視神器 Deepsukebe 使用教學,透過 AI 自動解碼網紅的裸照,快速合成露點照的裸照產生器

    0 shares
    Share 0 Tweet 0
  • SWAG.live 是什麼網站?SWAG Creator 女郎的商業模式及競品分析,AV素人寫真、付費色情影音市場簡介

    0 shares
    Share 0 Tweet 0
  • 渣男萬年密是什麼?台灣外流壓縮檔密碼大公開、免費空間常見的解壓縮萬用密碼大全(含 VOOFD 好車台所有密碼)

    0 shares
    Share 0 Tweet 0
  • 如何下載推特上被刪掉的影片?找回絕版檔案的破解法,老司機必學

    0 shares
    Share 0 Tweet 0
  • Onlyfans 外流下載教學,用 Eternia 論壇免費試看網紅的裸照寫真

    0 shares
    Share 0 Tweet 0

隨選文章・局妹吐信😛

打藥行銷

2019/11/14 - Updated on 2019/11/17
127

原廠就這樣

2019/08/04 - Updated on 2020/10/19
100

卡西歐槍魚介紹,最便宜的水鬼錶 Casio MDV-106-1A

2018/11/13 - Updated on 2020/10/19
13.6k

保險套狗

2017/11/18 - Updated on 2020/06/18
99

健身網紅咻咻Ashlee與男友Tao分手

2019/08/29 - Updated on 2019/12/21
30.7k

加熱滷妹

2020/03/07 - Updated on 2020/03/08
109

五馬分屍

2020/04/27 - Updated on 2020/05/06
462

東方特快列車

2020/01/11 - Updated on 2020/01/17
48
  • 抖內支持
  • Facebook
  • Instagram
  • Twitter
  • Dcard
  • 數位行銷
  • PTT/Dcard
  • 線上工具
  • 工作術
  • Webflow
  • WordPress
  • Google AD
  • Google Search Console
  • SEO
  • 廣告分析
  • 品牌故事
  • 飲食
  • 外在
  • 科技
  • 交通
  • 創意
  • 日記
  • 路人趣味
  • 迷幻廢文
  • 普通文學

有事燒紙:[email protected]

版權是我的,不要幹走

No Result
View All Result
  • 全部文章
  • SWAG 色站獨家福利連結
  • 成人內容
    • Chaturbate
    • SWAG
    • 成人網站
  • 數位行銷
    • PTT/Dcard
    • 線上工具
    • 工作術
    • Webflow
    • WordPress
    • Google AD
    • Google Search Console
    • SEO
  • 追蹤IG

版權是我的,不要幹走