audio总结

 <audio controls="controls" >
                                    @foreach (var m in music)
                                    {
                                        <source src="@m"/>
                                    }

                                    Your browser does not support the audio element.
                                </audio>
  • html自带的audio可以实现播放音频的功能,可以通过js进行控制,比使用插件省事
  • 默认只支持单个文件的播放,如果想实现复杂的功能,比如多个文件循环播放,文件之间切换,则需要通过js来操作
<div id="audioBox">
                                    <script type="text/javascript">
                                        window.onload = function(){
                                            var music;


                                            var arr = ['\\uploads\\Thread\\2018\\05\\27\\636630371184430011.mp3','\\uploads\\Thread\\2018\\05\\27\\636630397919190794.mp3','\\uploads\\Thread\\2018\\05\\27\\636630468720416809.mp3'];               //把需要播放的歌曲从后往前排,这里已添加两首音乐,可继续添加多个音乐
                                            var myAudio = new Audio();
                                            myAudio.preload = true;
                                            myAudio.style="width:100%";
                                            myAudio.controls = true;
                                            myAudio.src = arr.pop();         //每次读数组最后一个元素
                                            console.log(arr);
                                            myAudio.addEventListener('ended', playEndedHandler, false);
                                            myAudio.play();
                                            document.getElementById("audioBox").appendChild(myAudio);
                                            myAudio.loop = false;//禁止循环,否则无法触发ended事件
                                            function playEndedHandler(){
                                                console.log(arr);
                                                myAudio.src = arr.pop();
                                                myAudio.play();

                                                !arr.length && myAudio.removeEventListener('ended',playEndedHandler,false);//只有一个元素时解除绑定
                                            }
                                        }
                                    </script>
                                <audio preload="true" controls="" src="\uploads\Thread\2018\05\27\636630371184430011.mp3" style="width: 100%;"></audio></div>

猜你喜欢

转载自blog.csdn.net/dofun333/article/details/80471259