`
focus2008
  • 浏览: 27357 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
社区版块
存档分类
最新评论

html5之audio标签

阅读更多
直接上代码:
在页面上切入一个音乐播放器:
<div class="myaudio">
<audio id="myAudio" controls="controls" autoplay="true" src="http://luoo.800edu.net/low/luoo/radio665/01.mp3"></audio>
</div>

1. controls="controls" 表示在页面上显示:开始/暂停 的控制按钮。
2. autoplay="true" 表示打开网页时,自动播放。
3. .volume=0.06 控制音量大小,下面的代码控制自动播放时,将音量调的很小。
$(function(){
	// 控制audio默认声音大小
	// $("#myAudio").prop("volume", "0.06");
	$("#myAudio")[0].volume=0.06;	
});

4. 暂停和播放的控制如下,直接使用 play() 和 pause()函数:
function play()
{
   $("#myAudio")[0].play();
}

function pause()
{
   $("#myAudio")[0].pause();
}


5. 切换播放歌曲,改变 src 属性就可以了:
$("#myAudio").attr("src", "http://luoo.800edu.net/low/luoo/radio665/02.mp3");


分享到:
评论

相关推荐

    音频转码工具(用于将微信语音 amr 格式转换为 mp3 格式以便在 html5 的 audio 标签中进行播放).zip

    音频转码工具(用于将微信语音 amr 格式转换为 mp3 格式以便在 html5 的 audio 标签中进行播放).zip 音频转码工具(用于将微信语音 amr 格式转换为 mp3 格式以便在 html5 的 audio 标签中进行播放).zip 音频转码...

    HTML5中的audio标签概述案例.pdf

    《HTML5中的audio标签详解及案例分析》 HTML5作为现代网页开发的重要标准,极大地丰富了网页的多媒体体验。其中,`&lt;audio&gt;`标签是HTML5引入的一个核心特性,用于在网页中嵌入音频内容,使得开发者能够轻松地实现...

    利用HTML5的Audio标签实现音乐播放器

    HTML5的Audio标签是网页开发中的一个重要组成部分,它使得在网页上嵌入音频内容变得简单易行,无需依赖外部插件。在这个应用中,我们利用HTML5的Audio标签结合JQuery库来创建一个音乐播放器,这是一个典型的前端开发...

    使用audio标签播放mp3,amr,wav文件

    在网页开发中,HTML5引入了`&lt;audio&gt;`标签,使得在浏览器中直接播放音频文件变得简单易行。本文将详细讲解如何使用`&lt;audio&gt;`标签来播放不同格式的音频文件,包括mp3, amrnb和wav,并讨论可能遇到的兼容性问题以及解决...

    基于HTML5的audio 音乐播放器.zip

    1. HTML5 Audio元素:HTML5引入了`&lt;audio&gt;`标签,使得在网页中内嵌音频内容变得非常简单。`&lt;audio&gt;`元素允许我们直接在网页中播放音频文件,无需借助Flash或其他插件。基本结构如下: ```html &lt;audio controls&gt; ...

    html5 audio demo

    这个“html5 audio demo”是一个示例,展示了如何使用HTML5的`&lt;audio&gt;`标签来创建自定义样式的音频播放器,并实现播放控制功能。 一、HTML5 `&lt;audio&gt;` 标签 `&lt;audio&gt;`标签是HTML5引入的新元素,用于在网页上嵌入...

    基于vue框架,利用html5的audio标签实现音频播放,利用html5的video标签实现视频播放.zip

    Audio标签是HTML5中新增的多媒体元素,允许开发者在网页中嵌入音频内容。其基本语法如下: ```html &lt;audio src="your_audio_file.mp3" controls&gt;&lt;/audio&gt; ``` 这里的`src`属性指定音频文件的URL,`controls`属性则...

    HTML5 AudioVideo 标签,属性,方法,事件

    HTML5 Audio/Video 标签、属性、方法、事件 HTML5 中的 Audio/Video 标签是多媒体内容的基础组件,用于在网页中播放音频和视频内容。今天,我们将深入探讨 HTML5 Audio/Video 标签的各种属性、方法和事件。 ...

    本工具用于将微信语音amr格式转换为mp3格式以便在html5的audio标签中进行播放

    标题和描述中提到的工具是专门针对微信语音的格式转换问题设计的,它将微信聊天中的AMR格式语音文件转化为MP3格式,以便在HTML5的`&lt;audio&gt;`标签中流畅地播放。这个过程涉及到几个关键的技术点,下面将详细阐述。 ...

    HTML5 audio标签使用js进行播放控制实例

    标签可以在HTML5浏览器中播放音频文件。 &lt;audio&gt;默认提供一个控制面板,但是有些时候我们只需要播放声音,控制面板由我们自己来定义其显示的状态。 这里我们可以使用JS来进行控制,代码如下: 复制代码代码...

    html5 audio demo【修复拖动进度条bug】

    HTML5中的`&lt;audio&gt;`元素是网页中播放音频的核心组件,它使得在浏览器中内建音频支持成为可能,无需依赖Flash或其他插件。本示例着重于解决在使用`&lt;audio&gt;`元素时遇到的一个常见问题:用户拖动进度条时出现的bug。此...

    简单的音乐播放器基于HTML5 Audio标签.zip

    "简单的音乐播放器基于HTML5 Audio标签"的项目正是利用了这一特性来创建一个基本的音频播放界面。 首先,`&lt;audio&gt;`标签的基本结构是这样的: ```html &lt;audio src="music.mp3" controls&gt;&lt;/audio&gt; ``` 这里的`src`...

    Html5 audio标签样式的修改

    HTML5的`&lt;audio&gt;`标签是现代网页中用于嵌入音频内容的核心元素,它使得开发者无需依赖Flash等外部插件就能在网页上实现音频播放功能。然而,`&lt;audio&gt;`标签默认的样式在不同浏览器之间可能存在差异,这给开发者带来了...

    音乐播放列表(audio标签实现丶支持自动换歌)

    这个功能通常涉及HTML5的`&lt;audio&gt;`标签、JavaScript编程以及可能的CSS样式设计。下面将详细介绍如何利用这些技术来创建一个具备自动换歌功能的音乐播放列表。 首先,`&lt;audio&gt;`标签是HTML5引入的新特性,它允许我们...

    HTML5中的audio标签概述.pdf

    HTML5的`&lt;audio&gt;`标签是网页开发中用于嵌入音频内容的重要元素,它使得音频在网页中的集成变得更加标准化和简单。以下是对`&lt;audio&gt;`标签的详细解释: 1. **音频标签格式**: `&lt;audio&gt;`标签允许开发者在HTML5文档中...

    基于html5 webaudio api 实现的播放器.zip

    与HTML5的`&lt;audio&gt;`标签相比,WebAudio API 提供了更底层的控制和更多的音频处理能力。 二、WebAudio API 的核心组件 1. AudioContext:这是整个API的核心,用于管理音频的上下文环境,创建和连接音频节点。 2. ...

    HTML5使用Audio标签实现歌词同步的效果

    HTML5的最强大之处莫过于对媒体文件的处理,如利用一个简单的...类似地,在HTML5中也有对应的处理音频文件的标签,那就是audio标签。通过本文给大家介绍HTML5使用Audio标签实现歌词同步的效果,感兴趣的朋友一起学习吧

    HTML5-Audio-player.rar_audio player_html5 audio_player

    首先,HTML5 Audio是HTML5标准中引入的一个新元素,通过`&lt;audio&gt;`标签,开发者可以直接在网页上嵌入音频内容,无需依赖Flash或其他外部插件。这个标签支持多种音频格式,如MP3、WAV和Ogg,使得音频在不同浏览器间...

    audiojs,HTML5JS播放器2

    audio.js是一个强大的JavaScript库,它使得HTML5的&lt;audio&gt;标签能够适应各种浏览器环境,提供了一种“即插即用”的解决方案,极大地简化了网页音频播放功能的实现。 一、audio.js的核心功能 1. 兼容性扩展:audio....

Global site tag (gtag.js) - Google Analytics