Original address: HTTP://WEIBO.COM/P/23041874D6CEDD0102VKBR
Do not be so literary title scare, here will not tell you the history of girls in high school, there will not be any other reality should not have the pit Father plot, please note that this is a technical article, the main thing is: audio in the mobile side of the compatibility problem, as to why the title to play so literary and artistic, It's just to cater to this microblog:
God horse? You're not paying attention to me. Sina Weibo-Sonny really? Decisive walk, I will not be a self-portrait brush screen will not buy mask, and some just spit groove with the technical class to share, welcome attention ...
Well, in front of the usual nonsense a lot, below we say, audio in the mobile end of those pits, pits concrete performance with pits way ...
I secretly divided the audio into two kinds, background music and sound music;
I. Background music
Background music, is the music throughout the page, the general selection of rhythm and style page expression theme collocation, such as Travel page, I may choose "travelinglight" Such a brisk rhythm, clean country point, let users listen, feel really want to put down the baggage to travel feeling , and the Game class experience page, may choose "Thetime hascome" Such a fast rhythm, Rap&rock department, feeling is the kind of rhythm that blows in the game, but for that kind of maiden department Meng Meng's page, may choose "Downby the Sallygarden "This light melody, in line with the puberty girl's mood style ... But the background music type is generally light music type mainly, as a foil theme auxiliary role, rhythm too heavy should not long listen ...
The selection style is probably as described above, on the page playing background music, the general is to enter the page, the background music automatically sounded, the volume from small to large gradually into, to the end of the time, the volume from large to small gradually out, and then cycle the process, that the above process with HTML5 code conversion, that is the code flow:
First new audio, create an audio object, assign the audio src address, set the loop loop, detect its Readystatey audio current ready state, equal to 4 have_enough_data, indicating that the available data is sufficient to start playback, Or listen to the Canplaythrough event/canplay event, Canplaythrough that the song has been loaded into full completion, and the Canplay is buffered to the current playable state, the former is fully loaded before the broadcast, the latter is loaded into the current network state can broadcast on the broadcast, Not necessarily fully loaded, side-by-side broadcast, may be a little faster, but if the speed of a part of the network slowed down, or off the net, music may be kaka ... When loading is complete, play audio on play, presumably this process, specific code:
function Musicplay () {
var audio =document_createelement_x_x ("audio");
AUDIO.SRC = "Media/thunder.mp3";
Audio.loop =true;
Audio.load ();
Audio.addeventlistener ("Canplaythrough", function () {
Audio.play ();
},false);
}
Musicplay ();
Test Address: Demo
Two-dimensional code:
The above code looks normal, the code found on the Internet is also the same, on the computer broadcast is OK, and then when you are happy to broadcast on the phone, tnnd, Hang dad ah ... Have the impulse to smash the phone ... In the process above, you will find that there is no sound on the iOS phone! Jokes can't be opened like this, okay? This is what to make (PS: Android 4.1 or above is possible) ... With wireless network card +fiddler grasping package debugging, mobile phone with agent, incredibly can play normally, quite wonderful ...
For iOS phones, please scan the QR code below:
Did you hear the sound of thunder? Compared to the previous code, the audio is actually added to the HTML page node, and then iOS will be able to recognize the normal, this Android relatively better ...
For background music playback, I mentioned above, can do a "volume from small to large gradually, to the end of the time, the volume from large to small fade out" such a effect, so that users do not enter the page, immediately the maximum volume bombing, how many people meeting or in the library by such a burst of background music scare, trouble lifting, Be honest, we can still be friends ...
Volume, audio also has the corresponding control properties volume, set the range for 0-1,0 when mute, there is a proprietary mute property muted corresponding to, 1 is the original audio volume, and then I on the PC, wrote such a timer:
audio.volume=0.01;
Timer_volume_up=setinterval (function () {
if (audio.volume<0.15) {
audio.volume+=0.01;
}
else{
audio.volume=0.15;
Clearinterval (TIMER_VOLUME_UP);
}
},1000);
Just play, the sound volume is 0.01, and then 1s plus 0.01, until 0.15, stop, clear the counter, do a sound gradually into the effect, adjust the length of 15s;
Timer_count=settimeout (function () {
Timer_volume_down=setinterval (function () {
if (audio.volume>0.01) {
audio.volume-=0.01;
}
else{
audio.volume=0.01;
Clearinterval (Timer_volume_down);
}
},1000);
},parseint (audio.duration*1000-15000));
The length of the audio can be duration in seconds, Get audio.duration multiplied by 1000, into milliseconds, minus 15000, that is, 15 seconds before the end of audio, the detection of audio volume is greater than 0.01, if it is, 1s minus 0.01, until 0.01, 15 seconds, just audio end, as fade out
Demo Address: Demo
Two-dimensional code:
PC above sound is not very positive, the first time, because the volume is very low, so will not give users the feeling of breaking up, if the user is not suitable for a sound, you can have enough time to mute the phone, and then continue to browse the page, and the music cycle is not so hard, the feeling is seamlessly connected, Very comfortable on the loop up, there are wood ...
Then with iOS sweep QR code, instantly crash, again to pit daddy ...
Even if the volume 0.01 is set directly on the iOS phone, he is still the maximum Volume 1, here is the Apple setting, see the article "Safari HTML5 Audio and Video Guide" in detail:
On IOS devices, the audio level is always under the user ' s Physicalcontrol. The volume property isn't settable in JavaScript. Readingthe Volume property returns 1.
It means that the Cock Silk program ape You don't worry about, I can only the maximum sound ...
For Android, there is no detailed information that does not support, but I take the Android 4.4 test, it seems to be invalid ...
If you want to achieve the same effect on your phone as a PC, do not expect the code at this time, honestly adjust the audio source files ...
Is it too dull for the background music to put a single song? It's going to be a multi-audio sequence. So, listen to the onended event of the single, and then when the audio ended is finished, play the next song on play, Let's take a look at the example:
Demo Address: Demo
Two-dimensional code:
Normal on the PC, you will hear two sounds of thunder, and then beep the sound of the car, cycle play;
On iOS, it can also play normally, but Android 4.4 it does not get onended events, not supported, so after the Thunder, there is no beep beep ...
Here you can use SetInterval to calculate the time of each audio, manual loop playback, but this time will be due to loading load delay, the right is not allowed, probably half of the broadcast and re-broadcast ...
For background music autoplay problem, in the case of iOS, on the inside, the page load after the call play is able to play the music normally, but on the same phone safari, it is not automatically play, because the iOS system in order to prevent the Web page waste user traffic, users need to operate on the page (such as screen, Click), to play audio, video Similarly, so after Safari opens, everything is so quiet ... Here the solution, you can do an audio button, guide the user to choose to need no background music, then there is user action, human camouflage, ah haha ...
Background music problems, I have come up with a list of basic, then we go to the next topic: sound Music
second, sound music
Sound music, that is, in the page, click the button of the sound, the fall of the Duangduang, Jackie Chan hair stunt Sound, these for the auxiliary page, so that the dynamic interaction effect more real, close to the actual audio; Generally click Trigger type, play the number of times, click again, then Trigger, With the user action, for example, you play a gold coin game, point a gold coin, the sting of a sound, that point two gold coins, ding Ding two sound, that point 10,000 gold coins, on ... Do you think I will play 10,000 bites of the word, I like the kind by a dozen ding ding sting ding ding ding ding ding ding-ding ding ding ding ding ding ding ding ding ding ding ding ding ding people ... I'm honest, okay.
As for sound audio, it is also an audio, like the background audio with audio, so, with the above background audio the same problem I will not be cumbersome, we look at a fatal problem:
Demo Address: Demo
Two-dimensional code:
Background music is a very cheerful audio, page loading automatically play, the page in the middle of two buttons, click the Beep button, play a car flute sound audio, click the Thunder button, play a Thunder audio, on iOS, it can play normally;
On Android ... When the Beep button is clicked, the background music is forced to stop, the sound and audio playback is normal, the sound of the car flute is finished, the background music will not continue to play;
When the Thunder button is clicked, the Beep button is clicked and the Thunder is interrupted;
This shows that, under Android, you can only play one audio voice, not support multiple audio audio playback at the same time, so, Android under the background music or sound, it is necessary to weigh the trade-offs ...
When the page has more than one page, after the switch between the page, the audio current time is not reset, resulting in switching back and forth, the audio and the action does not match, specific effects such as:
Demo Address: Demo
Two-dimensional code:
Page left and right switch, the background music switch with the corresponding, when switching, will appear the sand rustle of the page, but then back and forth, will find that the audio is not reset, will continue to play the position of the last playback, here in fact only need to switch the page when the audio pause pause, Then currenttime the current time frame, set to 0, you can let the next time the audio playback, play from the beginning ... Specific effects press the Reset CurrentTime button, you can experience the ...
Now it's just adding 1 sounds, what if I add 10 more sounds? What happens? Yes, the number of HTTP requests increases, like the picture, the request time will also increase correspondingly, if you think 10 audio is nothing, then if 50 ... iP6 directly on the loading page, can't get in ... Well, when it comes to loading, when the page file increases, the volume reaches a certain level, the loading page is definitely added, the following provides a loading code:
Demo Address: Demo
Two-dimensional code:
Page load 10 pictures, 4 audio, after the resource is loaded, the word ' loading ... ' is replaced with "Pagestart", which means the page loading is complete ...
Hello hello, how suddenly shifted the topic, just said that the number of HTTP requests increased, how to become the load of resources to judge?
That says back to reduce the HTTP request this above, the picture, we know, can through csssprite, namely the picture merges, to reduce the picture request appropriately, that audio can also make a merger? Of course, it is possible to download an audio editor on the Internet, to synthesize them for a period of download ... Ah haha ... Actually there is this code can use Jsfiddle, by merging small audio, then record key points, which audio needs to get the corresponding key points, as well as the audio length, assign the value corresponding to the CurrentTime play time, and then play, due to loading problems, There may be 0. A few seconds of error, so the audio in the merger, the need to leave the appropriate space, so as not to avoid audio dislocation, read the next audio, as if the sprite diagram and diagram, also need to have the corresponding gap the same ... But once merged, after the change, it is more troublesome, because as long as the middle of an audio length, the back of the audio will have to do the corresponding move (cut short can not, haha), maintainability is low, recommended in the last project release when used (if there is time, haha) ...
Audio reference words, you can look at this article, feel good: "Making HTML5 audio actually work onmobile";
The above is my nearly a week to do audio projects encountered by the potholes, list, the students need to see as a reference, to avoid wasting time in the same pit, look forward to the compatibility of the various systems of the browser is perfect, there is an audio page overall will be a grade said (although the page loading speed was dragged down, haha) ... Then, no matter how great the demo on your PC is, audio sound is so good, you have to honestly use the real machine over again, IOS7/8 (why not IOS6?? Because IOS6 does not support audio tags, haha, see here), Android 4.1-4.4, real machine no problem, is really no problem ... Finally thank Kun Huang, the basis of God, Dai Lin to provide the relevant information (next time to finish the project remember to write summary Ah bastards, meet the Pit also write Ah bastards, don't let teammates walk the pit of their own AH bastards) ...
Those years, we were together by the pit of the H5 audio
