audio标签详解

HZUK • 2024-11-05 16:54 • 编程

一、不让拖动进度条

在默认情况下，audio标签提供了可以拖动的进度条，但某些时候，我们可能不想让用户拖动进度条，此时可以通过设置audio的controls属性为false即可禁用掉进度条的拖动功能。

<audio src="./music.mp3" controls="false"></audio>

二、audio标签怎么用

audio标签用于在网页中嵌入音频文件，通过src属性指定音频文件的位置即可。

<audio src="./music.mp3"></audio>

三、audio标签使用范例

以下是一个audio标签的简单使用范例：

<audio src="./music.mp3" controls autoplay>
   <p>您的浏览器不支持 audio 元素</p>
</audio>

在这个例子里，audio元素使用了src属性指定了要播放的音频文件，通过controls属性开启了音量和进度条，以保证播放的改变和调整，autopaly属性则表示播放音频文件时自动播放，如果浏览器不支持audio标签，则会输出一段文本提示用户。

四、audio标签所支持的音频格式

不同浏览器支持的音频格式可能不同，因此我们需要在指定src属性时都是用通用格式（如MP3），以兼容所有浏览器，以下是常见的音频格式：

五、audio标签自动播放属性

通过在audio标签设置autoplay属性，音频文件可以在网页载入时自动播放。

六、audio标签自动播放

以下是audio标签的自动播放例子，如有需要请注意：

<audio autoplay>
   <source src="audio.mp4" type="audio/mp4"/>
   <source src="audio.ogg" type="audio/ogg"/>
</audio>

七、audio标签的使用

audio标签可以通过多种方式获得和控制播放器的状态，如：

暂停/播放控制
音量调节
媒体时间监控/调节
音频播放回调事件

八、audio标签回调函数

audio标签回调函数用于监听音频播放过程中的状态变化，例如更新播放进度，播放/暂停状态变化等。以下是一个使用回调函数的例子：

<audio id="myAudio" src="audio.mp3"></audio>
<script>
   //获取audio元素
   var audio = document.getElementById("myAudio");

   //添加播放时回调函数
   audio.addEventListener("play", function() {
      console.log("播放开始！");
   });

   //添加暂停时回调函数
   audio.addEventListener("pause", function() {
      console.log("播放暂停！");
   });

   //添加时间变更时回调函数
   audio.addEventListener("timeupdate", function() {
      console.log("当前播放时间：" + audio.currentTime);
   });
</script>

九、audio标签中写文字

在audio标签中添加文字，一般使用嵌套方式即可完成，如下面例子：

<audio controls autoplay>
   <source src="/media/audio.mp3" type="audio/mpeg">
   <p>您的浏览器不支持 audio 元素</p>
</audio>

十、audio标签用于为页面添加音频选取

通常，我们可以使用input标签来允许用户自主选择音频文件，但要实现媒体播放，则需要使用audio标签。以下是一个常见的音频文件上传选择例子：

<input type="file" accept="audio/*" onchange="playAudio(event)">
<audio id="player"></audio>
<script>
   function playAudio(event) {
      var player = document.getElementById("player");
      player.src = URL.createObjectURL(event.target.files[0]);
      player.controls = true;
      player.autoplay = true;
   }
</script>

以上是关于audio标签详细的使用方式和范例，我们可以根据这些知识在实际开发中应用，以实现更好的用户体验和功能。

原创文章，作者：HZUK，如若转载，请注明出处：https://www.506064.com/n/149760.html