You are currently viewing DIY架設廣播串流(三):嵌入或分享線上播放連結

DIY架設廣播串流(三):嵌入或分享線上播放連結

前面我們透過 Rocket Streaming Audio ServerRocket Broadcast 設定好音訊轉碼和串流後,要如何分享給聽眾呢?以下有 3種方法

一、直接分享連結:透過播放軟體/APP播放

1. 切換至 Rocket Streaming Audio Server,中間的 /radio 點一下就會開啟瀏覽器

DIY架設廣播串流(三):嵌入或分享線上播放連結 1

2. 把瀏覽器上的連結複製後,提供給你的聽眾就可以透過播放軟體進行播放囉。
如果是手機平台,可以使用 TuneIn 或 RadioTuner的 APP進行播放。

DIY架設廣播串流(三):嵌入或分享線上播放連結 2

DIY架設廣播串流(三):嵌入或分享線上播放連結 3

二、將串流嵌入到網頁中

1.同樣的把串流的連結複製

2.把連結放到 HTML5 的 Audio標籤中並貼到網站原始碼中

<audio controls="controls" preload="none">
<source src="http://127.0.0.1:8000/radio" type="audio/mpeg">
</audio>

預設就會產生如下的播放介面,訪客瀏覽網站時按下播放就可以聽到你的廣播:

DIY架設廣播串流(三):嵌入或分享線上播放連結 4

三、使用第三方的串流播放介面 - MUSES

1. 把串流連結複製後,前往 MUSES RADIO PLAYER 網站,這是一個提供客製化 HTML5音樂播放器的網站

2. 切換到 Set up your player頁面

3. 這裡有兩個選項,你可以選擇由 MUSES幫你代管播放器的 Javascript等程式、或是下載相關檔案在上傳到你的伺服器中使用

4. Stream URL的地方輸入我們的串流網址;如果你有在 Rocket Broadcast調整串流格式為 OGG或其他格式,則在 Audio Codec的地方選擇對應的格式;Skin則是播放器的樣式,選擇後要按下Generate Code!才會顯示預覽,或是你可以先到這裡預先瀏覽;還有一個重要的則是選擇 Player Version為 HTML5,現在的瀏覽器已經不支援 Flash了,所以選擇 HTML5 可以獲得最佳的支援度。

5. 按下 Generate Code! 可以看到樣式,按下播放也可以先收聽;確認無誤後把下方產生的原始碼貼到網頁中,就可以讓訪客進行播放囉。

DIY架設廣播串流(三):嵌入或分享線上播放連結 5

相關文章

DIY架設廣播串流(一):Rocket Streaming Audio Server設定

DIY架設廣播串流(二):Rocket Broadcast設定

DIY架設廣播串流(三):嵌入或分享線上播放連結

Sid

喜愛電腦資訊、歷史、古文明、宇宙、自然生態的主題。喜歡看卡通和科幻主題的電影,有長不大的心情。從事金融業相關工作,分享的技巧多來自工作上的各項應用實作。

This Post Has 4 Comments

  1. Frog

    這還蠻酷的,可以直接播放音樂給人聽,但要先宣傳一波才有觀眾XD
    但這個也蠻容易被Discord取代,Discord有機器人點播功能,也比較容易跟人互動。

    話說站大妳的瀏覽器介紹網站崩雜了R >W<~

    1. Sid

      哎呀 想說默默結束掉還是被發現!

  2. Frog

    原來是打算默默結束阿~
    正所謂線上無不散宴席 (棒讀

    1. Sid

      MX 7 都出了呢......

發佈留言