Audio在移动端只播放一次

如下代码在移动端只会播放一次声音。

<audio id="s">
    <source src="music.mp3" type="audio/mpeg">
</audio>
<button onclick="s.play();">play</button>


Audio有一个load方法,介绍如下:
load() 方法重新加载音频/视频(audio/video)元素。



修改代码,在play()之前调用load(),声音可多次播放。

<audio id="s">
    <source src="music.mp3" type="audio/mpeg">
</audio>
<button onclick="s.load();s.play();">play</button>

原文地址:https://blog.51cto.com/7266799/2420850

时间: 2024-11-10 13:20:35

Audio在移动端只播放一次的相关文章

使用HTML5的Audio标签打造WEB音频播放器

目前,WEB页面上没有标准的方式来播放音频文件,大多数的音频文件是使用插件来播放,而众多浏览器都使用了不同的插件.而HTML5的到来,给我们提供了一个标准的方式来播放WEB中的音频文件,用户不再为浏览器升级诸如Adobe Flash.Apple QuickTime等播放插件,只需使用现代浏览器就可以聆听任何可以发出声音的WEB网站. WEB中的Audio标签 HTML5定义了一个新的元素用来指定标准的方式来插入音频文件到web页面中:<audio>标签.使用audio标签可以控制音频的播放与停

HTML5之audio实战,网页音乐播放器开发

今天我们就基于 HTML5 audio  来,开发一个网页音乐播放器. 在HTML5 新特性中,audio .video 是我们比较关心的 新 元素,我们终于可以脱离 Flash ,来开发音频.视频播放器了,对于 一个HTML 新元素,无非就是 属性.事件 .方法等等,关于audio 的具体的属性.事件 .方法,请谷歌. 看我们的HTML代码: audio.html <!DOCTYPE html> <html> <head> <meta charset="

gif图再html网页中只播放一次

ui给的gif图放在网页上只播放一次,怎么也找不出来解决办法是不是感觉自己的技术不行了,就在此时此刻不要怀疑自己,堂堂的web前端工程师不要怂. 听我的首先打开Photoshop,然后把这个gif图放进来,打开时间轴,看图片上那个一次选中切换成永远就解决了.所以说我们web前端工程师上能敲的了代码,下能修得了图片.加油我在架构师的位置等你们.如果还有什么更好的解决办法希望大家可以不吝赐教.必须

audio在浏览器中自动播放

audio 在浏览器中自动播放 //使用autoplay属性 var src = "./award.wav"; var body = document.getElementsByTagName("body")[0]; if (body.getElementsByTagName("audio").length <= 0) { var audio = document.createElement("audio"); audi

Glide只播放一次Gif以及监听播放完成的实现方案

需求: 近段时间正好有一个需求,是要实现Gif图只加载播放一次,并且要在Gif播放完毕后回调给系统的需求. 因为Glide 3系列的API与4系列还是有很大差距的,这里我们针对Glide 3.x和Glide 4.x的分别进行实现方案的说明. 解决方案: 在Glide3.x的解决方案: Glide.with(this).load("xxxurl") .listener(new RequestListener<Integer, GlideDrawable>() { @Overr

Wechat 微信端正确播放audio、video的姿势

在开发微信项目时,有在项目中播放音频(audio)和视频(video)的需求: 在开发中,我们会遇到的问题 audio.video在Android和IOS系统上的兼容性: video播放完成后,跳出浏览器广告(audio不存在): 对应的解决方案 html代码: <audio id="audio" src="http://q.letwx.com/app/touchtotouch-build/resource/happy.mp3" loop="loop

HTML5和HLS协议两种技术完美结合解决移动端网页播放问题

什么是HTML5 我们需要先了解一下HTML是什么.HTML的英文全称为Hyper Text Markup Language,即超文本标记语言.HTML5是HTML的一个新版本.HTML 不是一种编程语言,而是一种标记语言 (markup language).HTML5是对 HTML 标准的第五次修订. 其主要的目标是将互联网语义化,以便更好地被人类和机器阅读,并同时提供更好地支持各种媒体的嵌入.HTML5的设计目的是为了在移动设备上支持多媒体.新的语法特征被引进以支持这一点,如video.au

苹果手机audio标签微信实现自动播放

Html5的audio 音频在电脑端和android端都可以实现自动播放,必须放在一个点击事件里面,audio.play才起作用,在iphone上无法实现,以下是实现方法: <audio id="media" src="images/a.mp3" autoplay="" preload=""> document.addEventListener("WeixinJSBridgeReady", fu

HTML5使用Audio标签实现音乐的播放与暂停

最近工作中遇见音乐列表并点击试听,可以试听与暂停的效果.其实HTML5实现这个功能还是很简单的. 首先在网页中嵌入音乐的外链 <a href="javascript:void(0);" onclick="music.changeClass(this,'media');" class="btn btn-green" data-id="edit_btn" data-width="440" data-hei