首頁 web前端 js教程 js實作可相容IE、FF、Chrome、Opera及Safari的音樂播放器_javascript技巧

js實作可相容IE、FF、Chrome、Opera及Safari的音樂播放器_javascript技巧

May 16, 2016 pm 04:14 PM
js 播放器 音樂

本文實例講述了js實作可相容IE、FF、Chrome、Opera及Safari的音樂播放器。分享給大家供大家參考。具體實作方法如下:

/** 音乐播放器 
* @param obj  播放器id 
* @param file  音频文件 mp3: ogg: 
* @param loop  是否循环 
*/ 
function audioplayer(id, file, loop){ 
  var audioplayer = document.getElementById(id); 
  if(audioplayer!=null){ 
    document.body.removeChild(audioplayer); 
  } 
 
  if(typeof(file)!='undefined'){ 
    if(navigator.userAgent.indexOf("MSIE")>0){// IE 
   
    var player = document.createElement('bgsound'); 
    player.id = id; 
    player.src = file['mp3']; 
    player.setAttribute('autostart', 'true'); 
    if(loop){ 
      player.setAttribute('loop', 'infinite'); 
    } 
    document.body.appendChild(player); 
     
    }else{ // Other FF Chome Safari Opera 
   
    var player = document.createElement('audio'); 
    player.id = id; 
    player.setAttribute('autoplay','autoplay'); 
    if(loop){ 
      player.setAttribute('loop','loop'); 
    } 
    document.body.appendChild(player); 
     
    var mp3 = document.createElement('source'); 
    mp3.src = file['mp3']; 
    mp3.type= 'audio/mpeg'; 
    player.appendChild(mp3); 
     
    var ogg = document.createElement('source'); 
    ogg.src = file['ogg']; 
    ogg.type= 'audio/ogg'; 
    player.appendChild(ogg); 
     
    } 
  } 
} 

登入後複製

用法範例:

var file = []; 
file['mp3'] = '1.mp3'; 
file['ogg'] = '1.ogg'; 
audioplayer('audioplane', file, true); // 播放 
audioplayer('audioplane'); // 停止 

登入後複製

希望本文所述對大家的javascript程式設計有所幫助。

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學
1664
14
CakePHP 教程
1422
52
Laravel 教程
1316
25
PHP教程
1267
29
C# 教程
1239
24
Bose Soundbar Ultra首發體驗:開箱即用的家庭劇院? Bose Soundbar Ultra首發體驗:開箱即用的家庭劇院? Feb 06, 2024 pm 05:30 PM

從我記事開始,家裡就有一對落地式的大尺寸音響,讓我一直認為電視只有配上一套完整的音響系統才能稱得上是電視。但是剛開始工作的時候,我買不起專業的家庭音響。經過查詢、了解產品定位後,我發現回音壁這個品類非常適合我,不論是音質、體積或價格都符合我的需求。因此,我決定選擇回音壁。精挑細選後,我選了2024年初Bose推出了這款全景聲回音壁產品:Bose家庭娛樂揚聲器Ultra。 (圖片來源:雷科技攝製)一般來說,想要體驗到「原汁原味」的杜比全景聲效果,需要我們在家中佈置一套經過測量、校準的環繞聲+天花板

VLC Chromecast無法在Windows PC上執行 VLC Chromecast無法在Windows PC上執行 Mar 26, 2024 am 10:41 AM

VLCChromecast功能在您的WindowsPC上不起作用嗎?此問題可能是由Chromecast設備與VLC的鑄造功能之間的兼容性問題引起的。在這篇文章中,我們將告訴你在這種情況下你可以做什麼,以及如果VLC渲染器找不到你的Chromecast該怎麼辦。如何在Windows上使用ChromecastVLC?要使用VLC將影片從Windows投射到Chromecast,請遵循以下步驟:打開媒體播放器應用程序,前往播放選單。導航到Renderer選項,您將能夠看到偵測到的Chromecast設

建議:優秀JS開源人臉偵測辨識項目 建議:優秀JS開源人臉偵測辨識項目 Apr 03, 2024 am 11:55 AM

人臉偵測辨識技術已經是一個比較成熟且應用廣泛的技術。而目前最廣泛的網路應用語言非JS莫屬,在Web前端實現人臉偵測辨識相比後端的人臉辨識有優勢也有弱勢。優點包括減少網路互動、即時識別,大大縮短了使用者等待時間,提高了使用者體驗;弱勢是:受到模型大小限制,其中準確率也有限。如何在web端使用js實現人臉偵測呢?為了實現Web端人臉識別,需要熟悉相關的程式語言和技術,如JavaScript、HTML、CSS、WebRTC等。同時也需要掌握相關的電腦視覺和人工智慧技術。值得注意的是,由於Web端的計

透過英特爾 OpenVINO 插件,Audacity 現已獲得 AI 音訊編輯功能 透過英特爾 OpenVINO 插件,Audacity 現已獲得 AI 音訊編輯功能 Feb 15, 2024 am 11:06 AM

Audacity是一款免費開源的跨平台音訊編輯軟體。它具有開放的程式碼和插件貢獻機制,任何人都可以參與其中。此外,英特爾還提供了一套免費的OpenVINOAI插件,專為音樂編輯和播客製作人而設計。本站注意到,插件包大小約2GB,可在Intel的GitHub頁下載,還需要64位元Windows版Audacity才能運作。這款AI外掛最直覺的地方在於為Audacity音樂編輯功能帶來了三種進階工具:首先是「音樂生成」功能,使用者可以用文字描述所需音樂,AI會產生60秒以內的音樂片段,方便廣告和電影音樂

win10播放器進度條不動 win10播放器進度條不動 Feb 12, 2024 am 08:12 AM

Windows10v1809十月更新版正朝著史上最糟糕Windows升級義無反顧地衝過去,不但第一次正式發布後緊急撤回,還在重新打造了一個月之久後仍然Bug層出不窮,讓人對微軟的品控越來越擔憂。現在,它的Bug清單上又多了一項,而且這次中招的是微軟自家的媒體播放器WindowsMediaPlayer。近期有網友回饋,在安裝最新修補程式後,Windows10v1809的WindowsMediaPlayer出現了無法拖曳播放進度條的問題。目前還沒有找到解決方法。微軟已確認了一個Bug,涉及兩個補丁KB4

股票分析必備工具:學習PHP和JS繪製蠟燭圖的步驟 股票分析必備工具:學習PHP和JS繪製蠟燭圖的步驟 Dec 17, 2023 pm 06:55 PM

股票分析必備工具:學習PHP和JS繪製蠟燭圖的步驟,需要具體程式碼範例隨著網路和科技的快速發展,股票交易已成為許多投資者的重要途徑之一。而股票分析是投資人決策的重要一環,其中蠟燭圖被廣泛應用於技術分析。學習如何使用PHP和JS繪製蠟燭圖將為投資者提供更多直觀的信息,幫助他們更好地做出決策。蠟燭圖是一種以蠟燭形狀來展示股票價格的技術圖表。它展示了股票價格的

選擇適合音樂生的平板電腦 選擇適合音樂生的平板電腦 Jan 10, 2024 pm 10:09 PM

音樂生用什麼平板合適華為的ipad中的12.9吋音響是一款非常好的產品。它配備了四個揚聲器,音效非常出色。而且,它屬於pro系列,相比其他款式稍微更好。整體來說,ipadpro是一款非常優秀的產品。這款mini4手機的喇叭聲音較小,效果一般般。不能用來外放音樂,還是需要依賴耳機來享受音樂。耳機音質好的會有稍微好一些的效果,而便宜的三四十元的耳機就無法滿足要求了。鋼琴電子譜用什麼平板如果您想購買一台10寸以上的iPad,我推薦使用兩款應用程序,分別是Henle和Piascore。 Henle提供

微信怎麼放音樂 微信怎麼放音樂 Feb 23, 2024 pm 09:28 PM

微信怎麼放音樂?微信APP中是可以播放自己喜愛的音樂,但是多數的小伙伴不知道微信中如何播放自己喜愛的音樂,接下來就是小編為用戶帶來的微信放音樂方法圖文教程,有興趣的用戶快來一起看看吧!微信使用教程微信怎麼放音樂1、先打開微信APP,從頂部向下滑動進入到小程式頁面;2、接著點擊如下圖箭頭所示的【音樂】;3、然後在如下圖的介面,搜尋框輸入喜愛的歌名;4、最後選擇對應歌名點選即可放歌曲。

See all articles