view source
JavaScript
$(function(){
var mp3 = '500-milliseconds-of-silence.mp3';
var iframeAudio = $('<iframe>', {src: mp3, allow: 'autoplay'}).css({display:'none'});
$('body').append(iframeAudio);
//chromeにより音声の自動再生無効
//500-milliseconds-of-silence.mp3 再生により音楽許可
var mp3 = 'ame.mp3';
var audio = $('<audio>', {preload:'auto'}).appendTo($('body'));
var source = $('<source>', {src: mp3, type:'audio/mp3'}).appendTo(audio);
var bgm = audio[0];
bgm.currentTime = 0;
bgm.play();
console.log(mp3);
bgm.volume = 0;
var volumeDelta = 0.05
var timerId = setInterval(function(){
bgm.volume += volumeDelta;
console.log(bgm.volume);
if(bgm.volume < 0){
bgm.volume = 0;
clearInterval(timerId);
}
if( (bgm.volume + 0.01) >= 0.4 ){
volumeDelta = -0.05;
}
}, 2000);
});
CSS
HTML
ページのソースを表示 : Ctrl+U , DevTools : F12
view-source:https://hi0a.com/demo/-js/js-audio-autoplay/
ABOUT
hi0a.com 「ひまアプリ」は無料で遊べるミニゲームや便利ツールを公開しています。
プログラミング言語の動作デモやWEBデザイン、ソースコード、フロントエンド等の開発者のための技術を公開しています。
必要な機能の関数をコピペ利用したり勉強に活用できます。
プログラムの動作サンプル結果は画面上部に出力表示されています。
環境:最新のブラウザ GoogleChrome / Windows / Android / iPhone 等の端末で動作確認しています。
画像素材や音素材は半分自作でフリー素材配布サイトも利用しています。LINK参照。
動く便利なものが好きなだけで技術自体に興味はないのでコードは汚いです。
途中放置や実験状態、仕様変更、API廃止等で動かないページもあります。