html5-audio | 易学教程

How to get <audio> tag information?

阅读更多关于 How to get tag information?

问题 like title, subtitle, singer, Album, Bit rate etc.. wiki - MP3 tag infomation wiki - ID3(mp3 metadata format) I search a lot.. but I can't get answer. only searched how to play,stop,reload audio.. browser not support that? 回答1: One more library available at https://github.com/aadsm/JavaScript-ID3-Reader In its simplest form: ID3.loadTags("filename.mp3", function() { var tags = ID3.getAllTags(filename); alert(tags.artist + " - " + tags.title + ", " + tags.album); }); by specifying specific

Have audio tag play after a delay?

阅读更多关于 Have audio tag play after a delay?

问题 I'm playing an MP3 using the <audio> tag in HTML5. <audio controls="controls" autoplay="autoplay"> <source src="song.mp3" type="audio/mp3" /> </audio> This works fine, but I am wondering how I can put a delay in before the song starts to autoplay? I know there's not a delay attribute, but I'm thinking it could be accomplished via javascript? 回答1: Try this, really simple but you should move the JS outside the markup... <audio controls="controls" onloadeddata="var audioPlayer = this; setTimeout

Why audio events are not firing with BackboneJS but others are?

阅读更多关于 Why audio events are not firing with BackboneJS but others are?

问题 I don't understand why the click events are firing ok but not the timeupdate one. No event is firing from <audio> , I tried with canplay, play, pause, timeupdate, ... If I display the controls in the template a click .audio event will fire if I click on the player though. var PlayerView = Backbone.View.extend({ tagName : 'div', template: _.template($('#player-template').html()), initialize: function() { this.$el.html(this.template(this.model.toJSON())); } events: { 'timeupdate .audio':

Phonegap mixing audio files

阅读更多关于 Phonegap mixing audio files

问题 I'm building a karaoke app using Phonegap for Ios. I have audio files in the www/assets folder that I am able to play using the media.play()function This allows the user to listen to the backing track. While the media is playing another Media instance is recording. Once the recording has finished I need to lay the voice recording file over the backing track and I have no idea of how I might go about doing this. One approach I thought might work is to use the WEb Audio API - I have the

synchronize and highlight HTML text to audio

阅读更多关于 synchronize and highlight HTML text to audio

问题 If necessary I can explain in more detail but essentially what I need to do is effect CSS changes to HTML text in sync with an audio track - i.e., highlighting words/phrases in sync with the audio playback. I also need to control the audio playback by clicking on the text. I have good HTML/CSS chops, but I’m not as strong with raw js, so I’m hoping there’s a jQuery approach. I’m hoping someone can steer me in the best direction. Many thanks in advance, svs 回答1: For ease of use, I recommend a

Chrome only Loading 6 HTML5 audio tags

阅读更多关于 Chrome only Loading 6 HTML5 audio tags

We are working on project at wavestack.com and we are dealing with an issue that its giving us a hard time. Our page is supposed to load many audio tags at the same time, from a streaming source. You can check the concept in the following link: http://wavestack.com/songs/nTNonwsCSg932CtzPLk1FA== The problem comes when we're trying to load more than 6 tracks at the same time, as shown in the following link: http://wavestack.com/songs/hp7G8CSsg45t3fV5YNeqbQ== This page is working well on Firefox and IE10 but NOT IN CHROME. We also notice something curious: I'm printing in the console the value

How do you hide HTML5 Audio controls?

阅读更多关于 How do you hide HTML5 Audio controls?

How can I hide HTML5 audio's browser specific controls? I'm making thumbnail images to represent each track and JavaScript to play/pause. Thanks! HTML: <audio class="thumbnail" id="paparazzi" controls="none"> <source src="song.ogg" type="audio/ogg" /> <source src="../audio/fernando_garibay_paparazzisnlmix.mp3" type="audio/mpeg" /> Your browser does not support HTML5 audio. </audio> The controls attribute is a boolean attribute. This means that if it's specified, controls is true and if it's not specified, controls is false. As far as validity goes, if you want controls to be true, you can

Why audio events are not firing with BackboneJS but others are?

阅读更多关于 Why audio events are not firing with BackboneJS but others are?

I don't understand why the click events are firing ok but not the timeupdate one. No event is firing from <audio> , I tried with canplay, play, pause, timeupdate, ... If I display the controls in the template a click .audio event will fire if I click on the player though. var PlayerView = Backbone.View.extend({ tagName : 'div', template: _.template($('#player-template').html()), initialize: function() { this.$el.html(this.template(this.model.toJSON())); } events: { 'timeupdate .audio': 'onTimeUpdate', 'click .btn_play': 'onClickPlay', 'click .btn_pause': 'onClickPause' }, onTimeUpdate:

Do Mobile Browsers send httpOnly cookies via the HTML5 Audio-Tag?

阅读更多关于 Do Mobile Browsers send httpOnly cookies via the HTML5 Audio-Tag?

I try to play some mp3 files via the html5 audio-tag. For the desktop this works great (with Chrome), but when it comes to the mobile browsers (also Chrome (for Android)), there seem to be some difficulties: I protected the stream with some password an therefore the streaming server needs to find a special authentification cookie (spring security remember-me). But somehow the mobile browser doesn't send this cookie when it accesses the mp3-stream via the audio tag. When I enter the stream URL directly to the address bar everything works just fine. While I searched for the lost cookie I found

Get audio duration on Chrome for Android

阅读更多关于 Get audio duration on Chrome for Android

I'm getting the audio/video duration of a file without appending it to the screen. "Using the same code" , when I try to get the video duration on both sides it works as expected. But when using audio files it says that the duration is 0 on Android, but it works on a desktop computer. // Only working on Desktop var audio = new Audio(url); // Hide audio player // player.appendChild(audio); audio.addEventListener('loadedmetadata', function() { alert(audio.duration); }); And the below code is working: // Working on Desktop and Android var video = document.createElement('video'); video.src = url;