html5 audio标签 load方法

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>动态创建音频</title>
</head>

<body>
    <audio controls="controls" id="audio">
        <source id="s1" src="music/qinshimoon.mp3"/>
    </audio>
    <input type="button" value="changeSource" onclick="changSource()"/>

    <script>

        function changSource()
        {
            var audio = document.getElementById("audio");
            var src1 = document.getElementById("s1");
            src1.src = "music/Heroeswithin.mp3";
            audio.load();
        }
    </script>
</body>
</html>

如果没有source标签,在audio中直接指定src内容,不需要load方法,改变src值,音频就会发生改变

时间: 2024-08-07 09:00:48

html5 audio标签 load方法的相关文章

HTML5 audio标签属性,方法,事件汇总

1.<audio> 标签属性 src:音乐的URLpreload:预加载autoplay:自动播放loop:循环播放controls:浏览器自带的控制条 [html] view plaincopy <audio id="media" src="http://www.abc.com/test.mp3" controls></audio> 2.<video> 标签属性 src:视频的URLposter:视频封面,没有播放时

CEF3 HTML5 audio标签为什么不能播放mp3格式的音频文件

CEF3 HTML5 audio标签 为什么不能播放mp3格式的音频文件 原因略. 解决方法: 找一个最新版的chrome ,我用的是24版本.路径 C:\Documents and Settings\guo\Local Settings\Application Data\Google\Chrome\Application\24.0.1312.57的下面有一个文件ffmpegsumo.dll. 复制出来,替换掉CEF3的同名文件.就好了.

html5 audio 标签属性

src:String型,所播放音频的 url. autoplay:值为autoplay,如果出现该属性,则音频在就绪后马上播放. controls:值为controls,如果出现该属性,则向用户显示控件,比如播放按钮. loop:值为loop,如果出现该属性,则每当音频结束时重新开始播放.          audio 有几个事件: onended:当媒介已抵达结尾时运行脚本,也就是当前歌曲播放完了,这里的"媒介"是指audio标签. onloadstart:当浏览器开始加载媒介数据时

HTML5 audio标签 打造属于自己的音乐播放器

最近学习了HTML5中的Audio标签,学习他的最好方式当然是实践,于是就自己写了一个.那就直接上演示链接吧 http://htmlpreview.github.io/?https://github.com/djlxiaoshi/Audio/blob/master/music.html.模仿了QQ音乐网页版的部分样式.谁叫自己不会UI呢! HTML5中增加了Audio和Video标签,这两个标签的用法非常相似.功能却是相当强大,我们先来看一下Audio标签各个浏览器的支持情况.这里用的依然是Ca

html5 audio标签相关知识点总结

1.audio指JS原生对象,假如用jquery获取到audio标签后,需要dom[0]转为原生JS对象 if(audio.paused){ //如果音频暂停,就播放 audio.play(); }else{ //如果音频播放,就暂停 audio.pause(); } 2. var is_playFinish = setInterval(function(){ if(audio.ended){ //如果音频播放完毕 //do something window.clearInterval(is_p

关于html5 audio 标签在ios系统上不能正常自动播放的解决办法

由于 iOS Safari 限制不允许 audio autoplay, 必须用户主动交互(例如 click)后才能播放 audio, 因此我们通过一个用户交互事件来主动 play 一下 audio. 这个坑相信大家都已经踩过了, 在 iOS 9 没出现以前, 这样的 hack 方案还是妥妥的.但 iOS 9 出现后, 发现这个方案"失效"了. 没有办法, 看来是时候升级一下 hack 方案了, 于是仔细看了下 audio 的事件. 对于能够自动播放时事件的顺序如下loadstart -

html5 -----audio标签

在现在的公司上班需要做一个html5页面,上下可以滑动的,在页面上需要音乐,默认开始音乐播放,点击音乐标签后音乐停止.后来在项目开发中,遇到性能优化的问题,所以我建议大家以后在使用时不要直接在页面中使用audio标签 例如:<audio src="/h5/a/bg.mp3" autoplay loop data-src="/h5/a/bg.mp3" id="musicall"></audio> 这样不太好,页面预解析的时候

HTML5 audio标签自制音乐播放器

相关技能 HTML5+CSS3(实现页面布局和动态效果) Iconfont(使用矢量图标库添加播放器相关图标) LESS (动态CSS编写) jQuery(快速编写js脚本) gulp+webpack(自动化构建工具,实现LESS,CSS,JS等编译和压缩代码) 实现的功能 播放暂停(点击切换播放状态) 下一曲(切换下一首) 随机播放(当前歌曲播放完自动播放下一曲) 单曲循环(点击随机播放图标可切换成单曲循环) 音量调节(鼠标移入滑动设置音量大小) 歌曲进度条(可点击切换进度直接跳,也可以点击小

5款帮助简化的HTML5 Audio开发的Javascript类库

HTML5的audio标签提供了我们方便控制声音的功能,但是使用原生的HTML5来开发声音或者音乐相关的项目仍旧非常的麻烦,在今天这篇文章中,我们将介绍5款帮助你简化开发的javascript audio类库,相信合理的使用能够帮助你高效的开发基于html5 audio的应用和项目,希望大家觉得有帮助! SoundManager 2 soundmanager2绝对是一个产品级别的javascript audio解决方案,支持HTML5并且兼容老的flash.帮助大家使用一套统一API来实现跨平台