audio怎么轉換mp3,html 多個mp3,HTML5 audio 如何實現播放多個MP3音頻

 2023-10-20 阅读 18 评论 0

摘要:標簽是HTML5中的新標簽,定義聲音用于嵌入音頻內容,比如音樂或其他音頻流。用的比較多音頻格式是.mp3。audio怎么轉換mp3?標簽常用屬性如下表屬性audio標簽。值描述html播放音樂,autoplayautoplay添加該屬性后,音頻會自動播放controlscontrols設置后&#x

標簽是HTML5中的新標簽,定義聲音用于嵌入音頻內容,比如音樂或其他音頻流。用的比較多音頻格式是.mp3。

audio怎么轉換mp3?標簽常用屬性如下表

屬性

audio標簽。值

描述

html播放音樂,autoplay

autoplay

添加該屬性后,音頻會自動播放

controls

controls

設置后,顯示控件,如播放按鈕、音量

loop

loop

添加該屬性后,當音頻播放結束后會重新開始播放

preload

preload

音頻顯示頁面加載,準備播放,如已添加autoplay,則忽略該屬性

src

url

播放音頻的URL(地址)。

HTML5音頻簡單的使用實例如下

但有時候你的瀏覽器不支持.MP3格式播放,這時就需要設置兼容多個瀏覽器的格式了,如下

很多小白把上面理解為音頻播放列表,按順序播放(即播放完music.mp3后,自動播放下一個music.m4a)。html5設成多個src,主要是有的瀏覽器無法播放個別音頻格式,它從上到下讀取播放,如果第一個mp3格式能播放,后面的就沒用了。

以前給網頁、網站添加音樂播放列表時,都是用網易音樂、蝦米音樂中的“生成外鏈播放器”來給網頁添加音樂的,但過一段時間,你會發現你添加的音樂列表某首音樂不能播放了,主要原因是音樂版權問題。這時只能通過添加其他播放器或自己用代碼來實現了。推薦閱讀:網頁如何嵌入騰訊/優酷視頻播放器

10-1.jpg

9-1.jpg

2-0.jpg

目前,html5標簽只能同時播放一個音頻文件,如何要添加多個MP3音頻文件,然后按順序一個接著一個連續播放,需要用JS代碼來實現。

通過js來實現標簽連續播放多個MP3音頻,代碼如下:

window.onload = function(){

var arr = ["http://www.lmlblog.com/blog/bozhao/images/believe.mp3","http://www.lmlblog.com/blog/bozhao/images/shui.mp3"]; //把需要播放的歌曲從后往前排,這里已添加兩首音樂,可繼續添加多個音樂

var myAudio = new Audio();

myAudio.preload = true;

myAudio.controls = true;

myAudio.src = arr.pop(); //每次讀數組最后一個元素

myAudio.addEventListener(‘ended‘, playEndedHandler, false);

myAudio.play();

document.getElementById("audioBox").appendChild(myAudio);

myAudio.loop = false;//禁止循環,否則無法觸發ended事件

function playEndedHandler(){

myAudio.src = arr.pop();

myAudio.play();

console.log(arr.length);

!arr.length && myAudio.removeEventListener(‘ended‘,playEndedHandler,false);//只有一個元素時解除綁定

}

}

將上面代碼的音頻地址改成你的MP3地址即可,可在后面添加多個mp3音頻地址。

9-0.jpg

以上代碼效果顯示地址:http://www.lmlblog.com/blog/bozhao/ 網站添加播放器的方法除了上面說到的網易云生成外鏈播放器、蝦米播放器(制作地址http://www.xiami.com/widget/imulti)添加,還有很多,歡迎交流。

版权声明:本站所有资料均为网友推荐收集整理而来,仅供学习和研究交流使用。

原文链接:https://hbdhgg.com/2/152183.html

发表评论:

本站为非赢利网站,部分文章来源或改编自互联网及其他公众平台,主要目的在于分享信息,版权归原作者所有,内容仅供读者参考,如有侵权请联系我们删除!

Copyright © 2022 匯編語言學習筆記 Inc. 保留所有权利。

底部版权信息