html怎么播放下一首,javascript – HTML5音頻播放列表 – 第一個結束后如何播放第二個音頻文件?...

這是一個JSLinted,不引人注目的

Javascript示例,演示如何處理和使用結束的

mediaevent.在您的特定情況下,您將觸發在您的結束事件處理程序中播放第二個音頻文件.

單擊播放列表中的項目開始播放.一個音頻結束后,下一個音頻開始.

標記:(注意,有意避免< li>元素之間的空格 – 這是為了簡化使用nextSibling遍歷DOM.)

  • Space 1
  • Space 2
  • Space Lab

Stop

腳本:

// globals

var _player = document.getElementById("player"),_playlist = document.getElementById("playlist"),_stop = document.getElementById("stop");

// functions

function playlistItemClick(clickedElement) {

var selected = _playlist.querySelector(".selected");

if (selected) {

selected.classList.remove("selected");

}

clickedElement.classList.add("selected");

_player.src = clickedElement.getAttribute("data-ogg");

_player.play();

}

function playNext() {

var selected = _playlist.querySelector("li.selected");

if (selected && selected.nextSibling) {

playlistItemClick(selected.nextSibling);

}

}

// event listeners

_stop.addEventListener("click",function () {

_player.pause();

});

_player.addEventListener("ended",playNext);

_playlist.addEventListener("click",function (e) {

if (e.target && e.target.nodeName === "LI") {

playlistItemClick(e.target);

}

});?

?

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/529927.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/529927.shtml
英文地址,請注明出處:http://en.pswp.cn/news/529927.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

排球制作html,MAYA打造排球建模教程

這篇教程向悠悠之家的朋友們介紹用MAYA打造排球模型的過程&#xff0c;制作很簡單&#xff0c;希望對剛學習MAYA建模的朋友們有所幫助&#xff0c;我們先看看最終的效果圖&#xff1a;你們一定學過很多創建一個球的技巧&#xff0c;但在這個入門教學里面&#xff0c;我們將要學…

北大計算機系統結構學碩,轉自包云剛,希望的原野?最近幾個月參加了計算所、北大、上海交大多位計算機系統結構碩士與博士的答辯,說幾點體會:?①?高水平國際論文越來越多。簡單...?-?雪球...

來源&#xff1a;雪球App&#xff0c;作者&#xff1a; 逍遙劍99&#xff0c;(https://xueqiu.com/1732900127/153778925)最近幾個月參加了計算所、北大、上海交大多位計算機系統結構碩士與博士的答辯&#xff0c;說幾點體會&#xff1a;① 高水平國際論文越來越多。簡單統計了…

計算機主機箱前后都有什么,目前四種熱門的主機機箱設計都有哪些優缺點?

在DIY里面機箱算是最沒技術含量的產品之一&#xff0c;不過它卻是與DIYer接觸時間最長的東西。氣味大師每天都會按下機箱開機鍵&#xff0c;也會空余時間瞄上幾眼。機箱確實是對DIY影響最大的產品之一&#xff0c;今天我來盤點一下2018年見過的幾個主流機箱設計方案。說是機箱設…

微型計算機硬盤接口主要分為,北京交通大學微機原理與接口技術_期末復習題_圖文...

北京交通大學微機原理與接口技術_期末復習題_圖文更新時間&#xff1a;2017/1/26 18:34:00 瀏覽量&#xff1a;1285 手機版“微機原理與接口技術”2008年期末考試復習題1. 微機系統的硬件由哪幾部分組成&#xff1f;答&#xff1a;三部分&#xff1a;微型計算機(微處理器&…

計算機自然語言的中國科學家,中科院教授王斌加入小米 任自然語言處理首席科學家...

王斌新浪科技訊 8月28日上午消息&#xff0c;小米新經濟研究中心發布微信文章稱&#xff0c;中國科學院信息工程研究所研究員、博士生導師王斌已于8月20日正式加入小米集團&#xff0c;任AI實驗室自然語言處理(Natural Language Processing&#xff0c;NLP)首席科學家&#xff…

springcloud 相同服務名_淺談分布式與微服務

分布式和微服務是什么關系&#xff1f;簡單來說&#xff0c;分布式和微服務的概念比較相似&#xff0c;分布式屬于微服務。但是分布式和微服務在架構、作用和粒度上有所區別。因此&#xff0c;兩者的關系是既相互聯系又相互區別。本文主要帶大家認識分布式和微服務&#xff0c;…

html div 子元素 過多 卡頓,CSS不定高元素transition動畫的解決方案

CSS不定高元素transition動畫的解決方案類別&#xff1a; 技術CSS時間&#xff1a;2019-07-27 23:41:35字數&#xff1a;3297版權所有&#xff0c;未經允許&#xff0c;請勿轉載&#xff0c;謝謝合作~### 前言CSS中transition可以方便的實現我們的過渡動畫效果&#xff0c;但并…

bat 變量 文件內容第一行_VBA基礎入門(38)FSO生成bat文件后執行的實例

1.首先&#xff0c;我們回顧下FSO是什么&#xff1f;文件系統對象FSO的英文全稱是File System Object &#xff0c;這種對象模型提出了有別于傳統的文件操作語句處理文件和文件夾的方法。通過采用object.method這種在面向對象編程中廣泛使用的語法&#xff0c;將一系列操作文件…

HTML5廢除元素,HTML5 與 HTML4 的區別(2) - 新增的元素和廢除的元素

新增的結構元素在 HTML5 中&#xff0c;新增了以下與結構相關的元素&#xff1a;section元素section 元素表示頁面中的一個內容區塊&#xff0c;比如章節、頁眉、頁腳或頁面中的其他部分。它可以與h1、h2、h3、h4、h5、h6等元素結合起來使用&#xff0c;標識文檔結構。HTML5 中…

ps怎么更改背景圖層大小_PhotoShop處理圖層的一些技巧方法、PS圖層處理教程

一、了解圖層以及為什么它們如此有用。1.在“圖層”面板中查看和選擇圖層2.層包含組成分層文件的圖像&#xff0c;文本或對象。它們使您可以在一層上移動&#xff0c;編輯和使用內容&#xff0c;而不會影響其他層上的內容。3.圖層在“ 圖層”面板中按堆棧排列&#xff0c;該面板…

zabbix計算型監控項函數last_zabbix 自定義key類型之計算(Calculated items)-阿里云開發者社區...

計算類型的key定義主要是根據已定義過的key值來計算的。例如創建一個計算linux服務器內存實際使用大小的監控項(計算方法為&#xff1a;vm.memory.size[total]-vm.memory.size[cached]-vm.memory.size[free])&#xff0c;方法如下&#xff1a;1、在模板中或是主機中選擇監控項-…

使用計算機畫畫需要什么軟件,專業電腦繪畫用的是什么工具?

滿意答案srCDG3SL62013.11.13采納率&#xff1a;57% 等級&#xff1a;12已幫助&#xff1a;11125人電腦硬件配置(CPU,內存&#xff0c;顯卡等)越高&#xff0c;繪制大圖時&#xff0c;軟件不會卡。就會畫的很流暢。特別是Painter&#xff0c;模擬自然畫筆越真實&#xff0c;…

中如何移動物體在畫面中的位置_組合柜擺在客廳中什么位置最旺運?客廳中,財位是如何確定的?...

組合柜擺在客廳中什么位置最旺運&#xff1f;組合柜在風水中的重要性不如沙發&#xff0c;但要注意的宜忌事項也有很多。風水上講高者為山&#xff0c;低者為水&#xff0c;有高有低&#xff0c;有山有水&#xff0c;才符合風水原理。在客廳中&#xff0c;低的沙發是水&#xf…

計算機概論在線閱讀,計算器概論 or 計算機概論

計算機硬件的五大單元輸入單元、輸出單元、CPU內部控制單元、算數邏輯單元、主存儲器。中央處理器 CPU Central Processing UnitCPU 的種類精簡指令集 Reduced Instruction Set Computing, RISCSun SPARCIBM Power Architecture復雜指令集 Complex Instruction Set Comp…

螺旋天線有方向性嗎_螺旋天線方向圖

luoxuan13度.zip.zip我畫的二臂螺旋天線同軸電纜饋電&#xff0c;得到的方向圖是酒杯形狀的&#xff0c;而不是半球行的&#xff0c;修改了好多次參數都是這樣&#xff0c;這可如何是好&#xff0c;我的模型有問題么&#xff1f;還是哪里出了問題&#xff0c;請幫忙。怎么沒人幫…

jquery ajax html編碼,jQuery AJAX字符編碼

我目前正在編碼一個法語網站。有一個時間表頁面&#xff0c;可以使用側面的鏈接加載另一天的時間表。這是我用來執行此操作的JS&#xff1a;function load(y) {$.get(y,function(d) {$("#replace").html(d);mod();});}function mod() {$("#dates a").click…

miui10讀取不了u盤_u盤能識別但無法讀取_u盤無法識別如何修復

2019-08-07 14:04:57U盤設備大家都比較熟悉了&#xff0c;正常情況下&#xff0c;電腦插入U盤后會自動識別讀取數據&#xff0c;然后在打開U盤數據進行操作。但是有用戶反映將U盤插入win10系統后竟然無法識別&#xff0c;難道是U盤設備壞了&#xff0c;但是在...2018-06-07 10:…

四川大學計算機學院趙怡,【喜訊】我校計算機學院學子在藍橋杯大賽全國總決賽中再獲佳績...

在第十一屆藍橋杯“全國軟件和信息技術專業人才大賽”省賽上&#xff0c;我校選手面對包括北京大學、清華大學、上海交通大學、北京航空航天大學、武漢大學、西安交通大學、北京理工大學、四川大學、電子科技大學、吉林大學、東北大學等在內的1200余所高校&#xff0c;6萬余名頂…

2002勘察設計收費標準_上海裝修設計師的收費標準是什么?

目前家裝行業的發展趨勢全是特別迅速的&#xff0c;一點都不落后于房地產業的發展趨勢&#xff0c;因此目前在好多大城市全是各式各樣的家裝公司&#xff0c;這篇以上海裝修公司為例&#xff0c;向大伙兒詳細介紹一下上海裝修設計公司的有些收費標準&#xff0c;看一下絕大多數…

計算機控制系統EHA,優·計算機控制技術第四章.doc

第四章 過程控制理論與技術4.1 過程控制系統的連續化設計4.1.1 概述1.簡述計算機控制系統的設計&#xff0c;是指在給定系統性能指標的條件下&#xff0c;設計出控制器的控制規律和相應的數字控制算法。典型的計算機控制系統如圖4.1.1所示。系統的輸入r(t)跟系統的輸出y(t)比較…