簡單的音樂播放器

I put up a few MP3s on http://anacondalimousine.com, in simple

a href

s. While modern browsers will let you click and display some sort of player in a new page, why not play them in-page without a refresh? Simple enough. Plus we have HTML5 audio. Problem is, old IEs don't support HTML5 audio and you need flash or, god forbid, a Java applet to play them.

我以簡單

a href

在http://anacondalimousine.com上放置了一些MP3。 盡管現代的浏覽器可以讓您單擊并在新頁面中顯示某種播放器，但為什麼不重新整理就可以在頁面中播放它們呢？ 很簡單。 另外，我們還有HTML5音頻。 問題是，舊的IE不支援HTML5音頻，您需要Flash或Java applet才能播放它們。

What's a webmaster to do? All I need is a simple PLAY button next to each link

網站管理者是做什麼的？ 我需要的是每個連結旁邊的簡單點傳播放按鈕

While I was aware of SoundManager, I accidentally stumbled across sound.js yesterday and thought I should give it a chance. Tiny (3K), it should give me an easy way to do x-browser playing with the help of some SWF for IE, I assume. Dropped the JS from their CDN (nice), but then what? "Online documentation" points to API docs which I don't feel like reading. Demos don't give you the code. Next.

當我知道SoundManager時，昨天我偶然偶然發現了sound.js，并認為應該給它一個機會。 Tiny(3K)，我認為它應該為我提供了一種在IE的SWF幫助下進行x浏覽器播放的簡便方法。 從CDN中删除JS(很好)，但是那又如何呢？ “線上文檔”指向我不喜歡閱讀的API文檔。 示範程式不給您代碼。 下一個。

Sound manager has a nice "basic template". Awesome. Replace the sound.js js with SoundManager's. Load in FF. It's looking for an swf. In FF. Why? Because FF doesn't play mp3. Well, I'd rather convert the MP3 than have the user load SWF. But anyway, I drop the swf. For whatever reason (like you need a reason!) I've disabled flash in FF and forgot about it. So no sound in FF. And maybe I'm not the one. Requiring SWF in FF feels unnecessary, although I'm sure Sound Manager probably has way around it. I'm sure. I've met the author, he's brilliant. But... I still need to write some JS to initialize the playing. And if I'm to write code, might as well go solo.

聲音管理器有一個不錯的“基本模闆” 。 太棒了将Sound.js js替換為SoundManager。 裝入FF。 它正在尋找瑞士法郎。 在FF中。 為什麼？ 因為FF無法播放mp3。 好吧，我甯願轉換MP3也不願讓使用者加載SWF。 但是無論如何，我放棄了瑞士法郎。 無論出于何種原因(例如您需要理由！)，我都禁用了FF中的Flash并忘記了它。 是以，FF中沒有聲音。 也許我不是那個。 盡管我确定Sound Manager可能已經解決了問題，但在FF中要求SWF感覺沒必要。 我确定。 我見過作者，他很聰明。 但是...我仍然需要寫一些JS來初始化播放。 而且，如果我要編寫代碼，最好還是獨奏。

Here's what I came up with, hope it helps.

這是我想出的，希望對您有所幫助。

Disclaimer: I haven't tested in IE, and I mean at all. Should probably work in newer IEs

免責聲明：我還沒有在IE中進行測試，我的意思是。 應該可以在較新的IE中工作

示範版(Demo)

http://anacondalimousine.com

http://anacondalimousine.com

Codez，它們如何工作 (Codez, how they work)

Everything in an immediate function. Unobtrusive. Bail if (IE) browser doesn't know about

Audio

.

一切都立即生效。 不客氣。 如果(IE)浏覽器不了解

Audio

則将其保釋。

(function () {
  if (!Audio) return;
  
  // ...
 
}());           

Codes for play and stop:

播放和停止的代碼：

Some browsers play mp3, some OGG, so let's just change the extension and have both .mp3 and .ogg on the server

一些浏覽器播放mp3，一些浏覽器播放OGG，是以我們隻需更改擴充名，并将.mp3和.ogg都放在伺服器上

Loop though all links on the page, find the ones that point to .mp3

循環浏覽頁面上的所有連結，找到指向.mp3的連結

var dl = document.links;
for (var i = 0; i < dl.length; i++) {
  if (dl[i].href.split('.').slice(-1)[0] !== "mp3") {
    continue;
  }
  var p = document.createElement('button');
  p.innerHTML = playsym;
  p.onclick = play;
  dl[i].parentNode.insertBefore(p, dl[i]);
}           

Forgot to mention, my markup is as simple as it gets:

忘了提，我的标記非常簡單：

<p><a href="virus.mp3" target="_blank" rel="external nofollow" >Virus</a></p>
  <p><a href="yesterday.mp3" target="_blank" rel="external nofollow" >Yesterday</a></p>
  <p><a href="parting.mp3" target="_blank" rel="external nofollow" >Parting</a></p>
  <p><a href="faultline.mp3" target="_blank" rel="external nofollow" >Faultline</a></p>           

So all I'm doing is insert a PLAY button right before the link. Onclick it should play.

是以，我要做的就是在連結之前插入“播放”按鈕。 Onclick應該會播放。

The play() function initializes Audio with the appropriate extension, based on what the browser supports:

play()函數根據浏覽器支援的功能使用适當的擴充名初始化Audio：

function play(e) {
    var button = e ? e.target : window.event.srcElement;
    button.innerHTML = stopsym;
    var a = new Audio(button.nextSibling.href.replace('mp3', extension));
    a.play();           

And if you click the same button as the music plays, you stop it and reset the button click handler:

如果您單擊與音樂播放相同的按鈕，則将其停止并重置按鈕單擊處理程式：

button.onclick = function() {
      a.pause();
      button.innerHTML = playsym;
      button.onclick = play;
    };
  }           

而已 (That's it)

So simple and tiny, it's all inline, no extra requests, not a SWF in sight. Support for 72.3% of all browsers. The other 30% can still download the file and play it with a separate program.

如此簡單小巧，全部都是内聯的，沒有額外的請求，而且看不到SWF。 支援所有浏覽器的72.3％ 。 其他30％的人仍然可以下載下傳檔案并使用單獨的程式播放。

SoundManager and, I assume, sound.js have more features, events and other shiny, but for my simple purpose I'm so happy with the result I'll even blog about it 🙂

我認為SoundManager和sound.js具有更多功能，事件和其他亮點，但出于簡單的目的，我對結果感到非常滿意，甚至甚至會在此部落格化🙂

For full source - view source at http://anacondalimousine.com

有關完整源的資訊，請參見http://anacondalimousine.com上的源代碼。

Moarr info:

粗略資訊：

• Article on Opera.com

  在Opera.com上的文章

• MDN

  MDN

p.s.

about the mp3 to ogg conversion... ffmpeg ftw:

ps

關于mp3到ogg的轉換... ffmpeg ftw：

Tell your friends about this post on Facebook and Twitter

在Facebook和Twitter上告訴您的朋友有關此文章的資訊

翻譯自: https://www.phpied.com/simple-music-player/